<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hhh</title>
<style>
body {
margin: 0;
}
</style>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.158.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.158.0/examples/jsm/"
}
}
</script>
</head>
<body>
<script type="module" src="/1.js"></script>
</body>
</html>
import * as THREE from 'three';
//场景
const scene = new THREE.Scene();
//相机
//perspective透视的，PerspectiveCamera透视摄像机
//75：场景角度
//长宽比
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
//渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
//将renderer渲染器的dom元素（renderer.domElement）添加到HTML中
//这就是渲染器用来显示场景的<canvas>元素
document.body.appendChild(renderer.domElement);
//立方体对象
const geometry = new THREE.BoxGeometry(1, 1, 1);
//材质
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();
1157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
