我一直想在一个项目中使用Three.js,但我无法在我的屏幕上呈现任何东西.
经过一段时间的故障排除后,我想我应该问问看有没有人能帮我.
详细信息: 在XAMPP上托管, 下面是一个完整的Three.js示例,据我所知,它应该可以工作,但显然不能:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="c"></canvas>
<script type="module">
import {
Camera,
Material,
Texture,
} from "https://cdn.skypack.dev/three@0.132.2";
import { OrbitControls } from "https://cdn.skypack.dev/three@0.132.2/examples/jsm/controls/OrbitControls.js";
function main() {
const canvas = document.getElementById('c');
const renderer = new THREE.WebGLRenderer({canvas});
const fov = 75;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 2;
const scene = new THREE.Scene();
const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
const material = new THREE.MeshBasicMaterial({color: 0x44aa88});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);
}
</script>
</body>
</html>
我在这里通过CDN链接,但其他方法,如用NPM安装和以那种方式链接也得到了同样令人困惑的结果. 无论如何,它没有抛出任何错误,所以我感到不知所措.
我最终得到的只是一张空白的白页.