首页基本html中使用three.js

基本html中使用three.js

时间: 2023-07-21 08:08:33 浏览: 230

要在基本的 HTML 中使用 Three.js，你需要先在 HTML 文件中引入 Three.js 库的 JavaScript 文件。你可以从 Three.js 的官方网站上下载该文件，然后将其放在你的项目文件夹中。在 HTML 文件中引入 Three.js 库的 JavaScript 文件的代码如下： ```html <script src="path/to/three.js"></script> ``` 一旦你引入了 Three.js 库的 JavaScript 文件，你就可以在 JavaScript 代码中创建 Three.js 场景，添加对象，渲染场景等等。以下是一个简单的例子： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Three.js Example</title> </head> <body> <script src="path/to/three.js"></script> <script> // 创建场景 const scene = new THREE.Scene(); // 创建相机 const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); // 创建渲染器 const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建立方体 const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); // 设置相机位置 camera.position.z = 5; // 渲染场景 function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); </script> </body> </html> ``` 在上面的例子中，我们创建了一个场景、一个相机、一个渲染器和一个立方体，并将立方体添加到场景中。我们还设置了相机的位置，以及在每帧动画中旋转立方体并渲染场景。

阅读全文