v0.151无法在球体上展示小立方体
来源:15-4 环境贴图
躁动的胸大肌
2023-09-28
如题,新版cubeCamera不能配置 cubeResolution
import React, { useRef, useEffect } from 'react'
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
// 凹凸纹理
const Comp = () => {
const canvasDom = useRef<any>()
useEffect(() => {
const canvas = canvasDom.current
if (!canvas) return
let _destroy = false
const scene = new THREE.Scene()
// 创建一个视点
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)
camera.position.set(100,100,0);
camera.lookAt(new THREE.Vector3(0, 0, 0))
const control = new OrbitControls(camera, canvas)
control.minDistance = 1;
control.maxDistance = 50;
// console.log(camera)
// 渲染器
const renderer = new THREE.WebGLRenderer({
antialias: true,
canvas,
})
renderer.setSize(window.innerWidth, window.innerHeight)
// document.body.appendChild(renderer.domElement)
const g = new THREE.BoxGeometry(100, 100, 100,10,10,10)
// const m = new THREE.MeshPhongMaterial()
//
// const cube = new THREE.Mesh(g, m)
//
// scene.add(cube)
// 添加灯光
const spotLight = new THREE.SpotLight(0xffffff, 0.7)
// initControls(spotLight, camera)
spotLight.position.set(2000,8000,4000);
scene.add(spotLight)
// spotLight.shadowMapWidth = 4096
// spotLight.shadowMapHeight = 4096
// const axesHelper = new THREE.AxesHelper(5) // 参数表示坐标轴的长度
// scene.add(axesHelper)
// const cube = plane.pointer
// 纹理
// @ts-ignore
global.light = spotLight
const loader = new THREE.TextureLoader()
const mats = ['right', 'left', 'top', 'bottom', 'front', 'back'].map(name => {
const url = `./sky/${name}.jpg`
return new THREE.MeshBasicMaterial({
map: loader.load(url),
side: THREE.DoubleSide,
// wireframe: true,
// color: 0xff0000
})
})
const mesh = new THREE.Mesh(g, mats)
// console.log(mesh.position)
scene.add(mesh)
// 添加球体和立方体
const cubeGeometry = new THREE.BoxGeometry(3,3,3)
const cube = new THREE.Mesh(cubeGeometry, mats)
scene.add(cube)
const sphereGeometry = new THREE.SphereGeometry(4,15,15)
//立方体相机
const cubeCamera = new THREE.CubeCamera(0.1, 2000,
new THREE.WebGLCubeRenderTarget( 32, { generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter
} ))
console.log(cubeCamera)
const sphereMaterial = new THREE.MeshBasicMaterial({
envMap: cubeCamera.renderTarget.texture
})
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
scene.add(sphere)
sphere.position.x = 10
sphere.position.y = 0
renderer.setClearColor(0xffffff)
function animate() {
if (_destroy) return
control.update()
camera.updateProjectionMatrix()
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// controls.update(); // 更新鼠标拖动控制器
renderer.render(scene, camera)
requestAnimationFrame(animate)
cubeCamera.update(renderer, scene)
}
animate()
return () => {
_destroy = true
renderer.dispose()
}
}, [])
return <canvas ref={canvasDom}></canvas>
}
export default Comp
写回答
1回答
-
yancy
2023-09-28
过后我看下代码,发一个能运行的版本
00
相似问题