这里写目录标题
1. 演示地址2. 一个最简单的three.js案例3. 所有代码
1. 演示地址
案例地址
2. 一个最简单的three.js案例
一个最简单的three.js项目有三个部分
场景scene，
function initScene() {
scene
= new THREE.Scene();
}
相加camera
function initCamera() {
camera
= new THREE.PerspectiveCamera(75, window
.innerWidth
/ window
.innerHeight
, 0.1, 1000);
camera
.position
.z
= 5;
}
渲染器render
function initRenderer() {
renderer
= new THREE.WebGLRenderer();
renderer
.setSize(window
.innerWidth
, window
.innerHeight
);
document
.body
.appendChild(renderer
.domElement
);
}
3. 所有代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<link type="text/css" rel="stylesheet" href="../../three.js-r115/examples/main.css">
</head>
<body>
</body>
<script type="module">
import * as THREE from '../../three.js-r115/build/three.module.js';
let scene, camera, renderer;
let cube;
function initScene() {
scene = new THREE.Scene();
}
function initCamera() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
}
function initRenderer() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function initModel() {
let geometry = new THREE.BoxGeometry();
let material = new THREE.MeshBasicMaterial({color: 0x00ff00});
cube = new THREE.Mesh(geometry, material);
scene.add(cube);
}
function render() {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
function animate() {
requestAnimationFrame(animate);
render();
}
(function main() {
initScene();
initCamera();
initRenderer();
initModel();
animate();
})()
</script>
</html>
