1.首先three.js就是用js写的3d程序，要将他加入网页中只需要将three.js嵌入html中即可。
2.使用three.js的基本框架 其中主要有3大组件 1.场景scene 2.相机camera 3.渲染器render <!DOCTYPE html> | |||||||||
| <html> | |||||||||
| <head> | |||||||||
| <title></title> | |||||||||
| <style>canvas { width: 100%; height: 100% }</style> | |||||||||
| <script src="js/three.js"></script> | |||||||||
| </head> | |||||||||
| <body> | |||||||||
| <script> | |||||||||
| var scene = new THREE.Scene(); | |||||||||
| var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); | |||||||||
| var renderer = new THREE.WebGLRenderer(); | |||||||||
| renderer.setSize(window.innerWidth, window.innerHeight); | |||||||||
| document.body.appendChild(renderer.domElement); | |||||||||
| var geometry = new THREE.CubeGeometry(1,1,1); | |||||||||
| var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); | |||||||||
| var cube = new THREE.Mesh(geometry, material); scene.add(cube); | |||||||||
| camera.position.z = 5; | |||||||||
| function render() { | |||||||||
| requestAnimationFrame(render); | |||||||||
| cube.rotation.x += 0.1; | |||||||||
| cube.rotation.y += 0.1; | |||||||||
| renderer.render(scene, camera); | |||||||||
| } | |||||||||
| render(); | |||||||||
| </script> | |||||||||
| </body> | |||||||||
</html> |
本文介绍如何使用Three.js创建基本的3D场景。通过简单的代码示例，展示了如何设置场景、相机和渲染器，并添加一个旋转立方体。适用于Three.js初学者。
扫一扫
404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
