赞
踩
npm i three@0.156.1
npm i @types/three@0.156.0
index.html
<!DOCTYPE html> <html lang="en"> <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> <!-- <link rel="stylesheet" href="demo.css" /> --> <style> body { margin: 0; } </style> <!-- 核心依赖 --> <script async src="https://unpkg.com/es-module-shims@1.8.3/dist/es-module-shims.js" ></script> <script type="importmap"> { "imports": { "three": "../../node_modules/three/build/three.module.js" } } </script> </head> <body> <script type="module" src="demo.js"></script> </body> </html>
demo.js
import * as THREE from "three"; //! 场景 const scene = new THREE.Scene(); //! 透视相机(垂直视野角度,长宽比,近端面,远端面) const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.z = 5; //! 渲染器 const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); window.onresize = function () { renderer.setSize(window.innerWidth, window.innerHeight); // camera.setViewOffset( window.innerWidth, window.innerHeight, 0, 0, window.innerWidth, window.innerHeight ); }; //! 线 { // 定义材质 const material = new THREE.LineBasicMaterial({ color: 0x00ff00 }); // 创建几何体 const points = []; points.push(new THREE.Vector3(-3, 0, 0)); points.push(new THREE.Vector3(0, 3, 0)); points.push(new THREE.Vector3(3, 0, 0)); points.push(new THREE.Vector3(0, -3, 0)); points.push(new THREE.Vector3(-3, 0, 0)); const geometry = new THREE.BufferGeometry().setFromPoints(points); // 创建 Line const line = new THREE.Line(geometry, material); // 添加到场景 scene.add(line); } //! 立方体 { // 定义材质 const material = new THREE.MeshBasicMaterial({ color: 0x0ffff0 }); // 几何对象 const geometry = new THREE.BoxGeometry(1, 1, 1); // 创建 Cube const cube = new THREE.Mesh(geometry, material); // 添加到场景 scene.add(cube); // 动画效果 function animate() { // 向浏览器发起一个执行某函数的请求(一般默认保持60FPS的频率) requestAnimationFrame(animate); // 旋转 Cube cube.rotation.x += 0.01; cube.rotation.y += 0.01; // 旋转 Camera camera.rotation.z += 0.01; // 刷新相机 renderer.render(scene, camera); } animate(); }
TODO
TODO
TODO
TODO
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。