Collection
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
DOCTYPE html>
<html>
<head>
<title>title>
<style>
canvas { width: 100%; height: 100% }
</style>
<script src="three.min.js"></script>
head>
<body>
<script>
// 创建3D场景
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);
// 设置渲染器背景颜色
renderer.setClearColor(0x33FFCC);
// 将渲染器插入Dom当中
document.body.appendChild(renderer.domElement);
// 创建一个立方体几何图形
var geometry = new THREE.CubeGeometry(3, 3, 3);
// 创建一下材料，也就是几何图形的背景色
var material = new THREE.MeshBasicMaterial({
color: 0x0099ff
});
// 将几何图形渲染出来
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 调整照相机的角度
camera.position.z = 5;
// 定义渲染函数
function render() {
// 设置定时器让其不停地旋转
setTimeout(function () {
requestAnimationFrame(render);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
cube.rotation.z += 0.01;
renderer.render(scene, camera);
}, 10)
}
render();
</script>
body>
html>运行结果：
