三.js项目-添加导入导致blanc页面答案

【问题标题】：three.js project - adding import cause blanc page三.js项目-添加导入导致blanc页面
【发布时间】：2021-06-14 12:45:52
【问题描述】：

我是 three.js 的新手，一般来说都是前端。可能很基本，但我有这个问题......

我有一个 demothree.js，其中包含以下内容： index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>Beginning my Three.js Journey</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
<!-- CDN Link to Three.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
<!--reference your JS file here. Mine looks like below-->
<script src="index.js"></script>
</body>
</html>

和 index.js：

const fs = require('fs');
// We need 3 things everytime we use Three.js
// Scene + Camera + Renderer
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )
const renderer = new THREE.WebGLRenderer({ antialias: true})

renderer.setSize( window.innerWidth, window.innerHeight )
// sets renderer background color
renderer.setClearColor("#444444")
document.body.appendChild( renderer.domElement )
camera.position.z = 5

// resize canvas on resize window
window.addEventListener( 'resize', () => {
    let width = window.innerWidth
    let height = window.innerHeight
    renderer.setSize( width, height )
    camera.aspect = width / height
    camera.updateProjectionMatrix()
})

// basic cube
var geometry = new THREE.BoxGeometry( 2, 1, 1)
var material = new THREE.MeshStandardMaterial( { color: 0xff0051, flatShading: true, metalness: 0, roughness: 1 })
var cube = new THREE.Mesh ( geometry, material )
scene.add( cube )

// wireframe cube
var geometry = new THREE.BoxGeometry( 3, 3, 3)
var material = new THREE.MeshBasicMaterial( {
    color: "#dadada", wireframe: true, transparent: true
})
var wireframeCube = new THREE.Mesh ( geometry, material )
scene.add( wireframeCube )

// ambient light
var ambientLight = new THREE.AmbientLight ( 0xffffff, 0.2)
scene.add( ambientLight )

// point light
var pointLight = new THREE.PointLight( 0xffffff, 1 );
pointLight.position.set( 25, 50, 25 );
scene.add( pointLight );


function animate() {
    requestAnimationFrame( animate )
    cube.rotation.x += 0.04;
    cube.rotation.y += 0.04;
    wireframeCube.rotation.x -= 0.01;
    wireframeCube.rotation.y -= 0.01;
    renderer.render( scene, camera )
}
animate()

它按预期工作。

在 js 文件中添加任何必需的内容（我已经添加了 const fs = require('fs');）导致 HTML 变为 blanc。

顺便说一句，我使用一个简单的快速服务器返回 HTML 文件：

const express = require('express');
const app = express();

app.use(express.static(__dirname))

app.listen(8080);
console.log("listening on port 8080");

有什么建议吗？我还需要做什么才能加载外部库？

非常感谢！！！

【问题讨论】：

什么是 index.cs？一个 C# 文件？
index.js，更正了描述
我用一个简单的 HTML 尝试了同样的方法（在 index.js 中我只添加了 alert("alert text")），当我在 js 文件中添加了一个导入时（const fs = require( 'fs');) 没有任何反应。所以我知道这是一个简单的 HTML、javascript 问题...
这能回答你的问题吗？ JavaScript require() on client side

标签： javascript html node.js three.js

【解决方案1】：

require() in const fs = require('fs') 不是标准 JavaScript API 的一部分，它存在于 Node JS 中。如果要导入某个文件，可以在html中使用标签，例如

<input type="file" id="file-selected" accept=".jpg">

【讨论】：

这确实是首选的解决方法。您也可以fs in express 并通过服务器提供文件，具体取决于用例