时间戳

首页 > 解决方案 > 三.js项目-添加导入导致blanc页面

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

问题描述

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

我有一个演示three.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");

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

非常感谢！！！

标签： javascripthtmlnode.jsthree.js

解决方案

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

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

推荐阅读