按照demo【physics_oimo_instancing.html】敲的,不知道问题出现在哪儿
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "../three.js-r139/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from "../three.js-r139/build/three.module.js";
import { OrbitControls } from "../three.js-r139/examples/jsm/controls/OrbitControls.js";
import { GUI } from "../three.js-r139/examples/jsm/libs/lil-gui.module.min.js";
var scene, camera, renderer;
let boxes, icosahedrons, floor;
var axesHelper;
let ambientLight, dirLight;
let controls;
let width = window.innerWidth;
let height = window.innerHeight;
const color = new THREE.Color()
initThree()
initLight()
initMeshs()
enableShadow()
render()
window.addEventListener('resize', function () {
width = window.innerWidth;
height = window.innerHeight;
camera.aspect = width / height
camera.updateProjectionMatrix()
renderer.setSize(width, height)
})
// document.addEventListener('mousemove', function (event) {
// // 针对页面做了分割,中心点为0,0,左上角是-1,1右上角是1,1
// mouse.x = event.clientX/window.innerWidth * 2 - 1
// mouse.y = -event.clientY/window.innerHeight * 2 + 1
// })
function initThree() {
// 场景
scene = new THREE.Scene()
scene.background = color.setHex(0x888888)
// 透视摄像机
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.position.set( 4,4,4 );
camera.lookAt( 0, 0.5, 0 );
// 环境光
ambientLight = new THREE.AmbientLight()
scene.add(ambientLight)
// 辅助坐标轴
axesHelper = new THREE.AxesHelper(1)
scene.add(axesHelper)
// 实例化构造器,并插入到dom元素中
renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(width, height)
document.body.appendChild(renderer.domElement)
// 轨道控制器
controls = new OrbitControls(camera, renderer.domElement)
// requestAnimationFrame(render)
// controls.addEventListener('change', render)
// render()
}
// 实体
function initMeshs() {
floor = new THREE.Mesh(
new THREE.BoxGeometry(10, 1, 10),
new THREE.ShadowMaterial({color: 0x111111})
)
floor.position.y = - 2.5;
scene.add(floor)
const material = new THREE.MeshLambertMaterial()
boxes = new THREE.InstancedMesh(
new THREE.BoxGeometry(0.1, 0.1, 0.1),
material,
100
)
const matrix4 = new THREE.Matrix4()
const color = new THREE.Color()
for (let index = 0; index < boxes.count; index++) {
matrix4.setPosition(Math.random(), Math.random(), Math.random())
boxes.setMatrixAt(index, matrix4)
boxes.setColorAt(index, color.setHex(Math.random() * 0xffffff))
}
scene.add(boxes)
}
function initLight() {
dirLight = new THREE.DirectionalLight()
dirLight.position.set(10, 10, -5)
scene.add(dirLight)
}
function enableShadow () {
renderer.shadowMap.enable = true
floor.receiveShadow = true
boxes.castShadow = true // 生成投影
boxes.receiveShadow = true // 接收阴影
}
// 渲染
function render() {
requestAnimationFrame(render)
renderer.render(scene, camera)
}
</script>
</body>
</html>```