<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
<script type="module">
import * as THREE from 'https://unpkg.com/three/build/three.module.js'
// 创建场景
const scene = new THREE.Scene()
// 创建相机
const camera = new THREE.PerspectiveCamera()
// 调整相机
camera.position.z = 10
camera.position.y = 2
// 创建立方体
const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
// 网格
const cube = new THREE.Mesh(geometry, material)
cube.position.set(0, 3, 0)
scene.add(cube)
// 创建渲染器
const renderer = new THREE.WebGLRenderer()
// 调整渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight)
// renderer中有domElement 是 canvas
document.body.appendChild(renderer.domElement)
// 添加网格地面
const gridHelper = new THREE.GridHelper(10, 10)
scene.add(gridHelper)
// 让立方体转起来
function animate() {
requestAnimationFrame(animate)
cube.rotation.x += 0.01
// 进行渲染
renderer.render(scene, camera)
}
animate()
</script>
</html>
扫一扫
08-18
985
985
07-20
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
