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

过后我看下代码,发一个能运行的版本

0
0

WebGL+Three.js 入门与实战,系统学习 Web3D 技术

前端的技术蓝海,涨薪好选择

1081 学习 · 294 问题

查看课程