- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我一直在努力从 three.js 导入示例模块, 我用过 next.js(服务器端 react 框架)在我的项目中使用 express 的自定义服务器。我的 服务器代码 看起来像这样 -
const express = require('express');
const next = require('next');
const favicon = require('serve-favicon');
var path = require('path');
let fs = require('fs')
const dev = process.env.NODE_ENV !== 'production';
const nextApp = next({ dev });
nextApp.prepare()
.then(() => {
let server = express(), options = {}, PORT = 3000, app = express()
if (dev) {
// DEVELOPMENT ///
// DEVELOPMENT ///
}
else {
// PRODUCTION ///
options = {
...options
}
// PRODUCTION ///
}
server.use(favicon(path.join(__dirname, "/favicon.ico")))
server.get('/', (req, res) => {
const actualPage = '/';
nextApp.render(req, res, actualPage);
});
server.get('*', (req, res) => {
const actualPage = '/not-found';
nextApp.render(req, res, actualPage);
// return handle(req, res)
});
server.listen((PORT), (err) => {
if (err) throw err
console.log('>> Ready on ' + PORT)
})
})
.catch((ex) => {
console.error(ex.stack)
process.exit(1)
})
import React, { useState, useEffect } from 'react'
import * as THREE from 'three'
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls'
import "../src/assets/sass/home.scss"
const X = () => {
let parent, renderer, scene, camera, TrackballControls
useEffect(() => {
// renderer
renderer = new THREE.WebGLRenderer()
renderer.setSize( window.innerWidth, window.innerHeight )
document.body.appendChild( renderer.domElement )
// scene
scene = new THREE.Scene()
// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 )
camera.position.set( 20, 20, 20 )
// controls
controls = new TrackballControls( camera )
controls.minDistance = 5
controls.maxDistance = 250
controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
controls.dampingFactor = 0.05;
// axes
// scene.add(new THREE.AxisHelper( 20 ))
// geometry
let geometry = new THREE.SphereGeometry( 2, 8, 6, 0, 6.3, 0, 3.1)
// material
let material = new THREE.MeshBasicMaterial({
wireframe: true,
wireframeLinewidth: 1
})
let sphere = new THREE.Mesh( geometry, material )
// parent
parent = new THREE.Object3D()
scene.add( parent )
scene.add( sphere )
function animate() {
requestAnimationFrame( animate )
parent.rotation.z += 0.01
controls.update()
renderer.render( scene, camera )
}
animate()
}
,[])
return <div></div>
}
export default X
const withSASS = require('@zeit/next-sass')
const { parsed: localEnv } = require('dotenv').config()
const webpack = require('webpack')
// const path = require('path')
function HACK_removeMinimizeOptionFromCssLoaders(config) {
console.warn(
'HACK: Removing `minimize` option from `css-loader` entries in Webpack config',
)
config.module.rules.forEach(rule => {
if (Array.isArray(rule.use)) {
rule.use.forEach(u => {
if (u.loader === 'css-loader' && u.options) {
delete u.options.minimize
}
})
}
})
}
module.exports = withSASS(
{
webpack(config) {
HACK_removeMinimizeOptionFromCssLoaders(config)
config.plugins.push(new webpack.EnvironmentPlugin(localEnv))
return config
}
})
最佳答案
我知道这里没有人看到这个,但如果将来有人遇到这个问题,我会发布我的解决方案。所以这就是我想出来的 -
我在我的问题中没有提到我使用的是名为 next.js 的 SSR(服务器端渲染) react 框架。导入与纯 react 应用程序完美配合。但是在服务器端框架中,与导入相关的东西应该在 useEffect(或 componentDidMount)内完成,以及其余的 threejs 东西。所以我像这样动态导入它 -
let dynamicallyImportPackage = async () => {
let TrackballControls
await import('three/examples/jsm/controls/TrackballControls')
// you can now use the package in here
.then(module => {
TrackballControls = module.TrackballControls
})
.catch(e => console.log(e))
return TrackballControls
}
let TrackbackControls = await dynamicallyImportPackage()
// controls
controls = new TrackbackControls(camera, container)
controls.minDistance = 5
controls.maxDistance = 250
关于reactjs - 如何在下一个 js 中从节点模块外部的文件夹中导入模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58669052/
我在使用NetBeans 6.8时遇到以下问题。我通过项目属性->库->编译选项卡->添加JAR /文件夹添加带有jar的文件夹。在下一个窗口中,我选择文件夹,然后选择“复制到库文件夹”。但是,我仍然
我的网站有一个域别名。我想知道如何将 domainA.ext 的请求重定向到 https://domainA.ext/folderA和对 domainB.ext 的请求到 http://domainB
我应该在 Eclipse 中构建的 Android 项目中创建自己的自定义菜单文件夹吗?例如,我想创建一种出现在所有 Activity 中的标题。我知道菜单应该在 res/menu 文件夹中的 XML
我正在使用 VS2008 和 .net 3.5。我在我的解决方案中创建了一个类库(Myproject.Controllers)。在这个类下,我添加了一个 Controllers 文件夹。在文件夹中我添
我有一个包含生成后步骤的 Visual Studio 2012 扩展项目,我想在其中将 .dll 和 .AddIn 文件复制到当前用户的 Visual Studio 2012 AddIns 文件夹中。
我在专有的 linux 发行版中有一些自动下载。 他们去临时暂存盘。我想在它们完成后将它们 move 到主 RAID 阵列。我能看到的最好方法是检查磁盘上的文件夹,看看内容是否在最后一分钟发生了变化。
我目前正在使用 SVN 对我的软件项目进行版本控制。在一个正在进行的项目中,我有主干,用于客户的共同功能和规范以及分支,用于客户特定的。 有没有办法在每次执行此类操作时标记一些不应合并到分支中的文
这个问题在这里已经有了答案: How to exclude a directory in find . command (45 个回答) 8 年前关闭。 如何删除文件夹中的所有内容并排除特定文件夹和文
如何在特定目录中创建具有当前日期和时间的文件夹或文件? DateTimeFormatter f = DateTimeFormatter.ofPattern("uuuuMMdd HHmmss") ; L
有没有办法在系统文件资源管理器的左侧“文件夹”栏中打开文件或文件夹?如果没有这个,我必须打开文件资源管理器并一直导航到该文件夹所在的位置才能操作文件,这确实很不方便。对于大多数带有这样导航栏的工具
预期:我使用 go get 安装包,它在 src 文件夹中创建了所有必要的文件夹,但它们只出现在 pkg/mod 文件夹中,我不能使用它们。 现实:它说它正在下载,完成,然后什么都没有。 一切都在 W
说 foo.zip包含: a b c |- c1.exe |- c2.dll |- c3.dll 哪里a, b, c是文件夹。 如果我 Expand-Archive .\foo.zip -Destin
不久前我正在删除 var 文件夹中 Magento 的缓存。我可能是错的,但我认为我犯了一个错误,而不是删除 var/cache 中的所有内容,而是意外删除了 var 中的所有内容。 Magento
我在 svn 存储库的单独文件夹中有一些代码项目。 现在我在删除文件时遇到一些问题:大多数时候一切顺利,但有时当我从磁盘删除文件或文件夹时, checkin 过程会出现各种错误。 所以我想知道:在sv
有没有什么方法可以用很少的R命令行自动删除所有文件或文件夹?我知道 unlink() 或 file.remove() 函数,但对于这些函数,您需要定义一个字符向量,其中包含您想要的文件的所有名称删除。
用于在文件夹中查找不符合Get-Childitem的LastWriteTime过滤器日期范围标准的文件的powershell命令是什么? 因此,请检查目录中是否包含不包含在01/10/2012(十月1
我正在为我工作的公司内部使用的应用程序之一编写 NSIS 安装程序,安装过程工作正常,所有 REG 键都已创建,文件夹和服务也没有问题,该应用程序使用。出于某种我无法理解的原因,卸载过程不起作用。
我有一个 Excel 文件,并且在同一文件夹中还有一个包含我想要包含的 CSV 文件的文件夹。使用“来自文件夹”查询,第一步将给出以下查询: = Folder.Files("D:\OneDrive\D
我在docker中玩ScyllaDB。为了使ScyllaDB在docker生产设置中最有效地运行,它需要一个XFS格式的磁盘。 您知道如何在Linux和MacO中创建XFS容器卷,磁盘文件吗? 谢谢
我应该编写一个函数,其中包含之前每次与该数字相乘的乘积 基本上是这样的: > productFromLeftToRight [2,3,4,5] [120,60,20,5] 我应该使用高阶函数,例如折叠
我是一名优秀的程序员,十分优秀!