threeJs物体阴影问题

最新推荐文章于 2024-06-19 16:53:08 发布

Έι

最新推荐文章于 2024-06-19 16:53:08 发布

阅读量311

点赞数

文章标签：前端 js

本文链接：https://blog.csdn.net/weixin_50760181/article/details/125429022

版权

Three.js 阴影问题 MeshLambertMaterial requestAnimationFrame 性能优化

关键词由CSDN通过智能技术生成

最近刚开始看threeJs 就自己上手写啦一下全是坑

也可能是我自己太菜啦留个纪念
代码如下

import * as THREE from 'https://cdn.skypack.dev/three@0.141.0'

window.onload = () => {
    const scene = new THREE.Scene();
    //camera 透视相机
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)
    //渲染器
    const render = new THREE.WebGLRenderer();
    render.setClearColor(new THREE.Color(0xeeeeee))
    render.setSize(window.innerWidth, window.innerHeight)
    //显示三维坐标系
    const axes = new THREE.AxesHelper(20)
    //渲染器阴影开启
    render.shadowMap.enabled = true;
    scene.add(axes)
    //平面缓冲几何体
    const geometry = new THREE.PlaneGeometry(40, 90);
    const material = new THREE.MeshLambertMaterial({ color: 0xffffff });

    const plane = new THREE.Mesh(geometry, material)

    plane.position.x = 0
    plane.position.y = 0
    plane.position.z = 0
    // plane.rotation.x = 0.6 * Math.PI;
    plane.rotation.x = -0.5 * Math.PI
    plane.castShadow = true
    // 地面接受阴影
    plane.receiveShadow = true;
    scene.add(plane)
    //立方缓冲几何体
    const geometryBox = new THREE.BoxGeometry(5, 5, 5);
    const materialBox = new THREE.MeshLambertMaterial({ color: new THREE.Color("rgb(221,160,221)"), side: THREE.DoubleSide });
    //结合
    const cube = new THREE.Mesh(geometryBox, materialBox);
    cube.position.x = 0
    cube.position.y = 8
    cube.position.z = 5
    scene.add(cube)
    //开启光
    let light = new THREE.SpotLight(0xFFFFFF)
    light.position.set(-10, 50, -115)
    light.castShadow = true;

    // light.shadow.camera.near = 40;
    // light.shadow.camera.far = 130;
    scene.add(light)

    const spotLightHelper = new THREE.SpotLightHelper(light);
    scene.add(spotLightHelper);

    //qiu
    const geometrys = new THREE.SphereGeometry(3, 64, 32);
    const materials = new THREE.MeshLambertMaterial({ color: 0xffff00 });
    const sphere = new THREE.Mesh(geometrys, materials);
    sphere.position.x = 0
    sphere.position.y = 8
    sphere.position.z = 15
    scene.add(sphere);

    //camera 设置
    camera.position.x = -30
    camera.position.y = 40
    camera.position.z = 30
    camera.lookAt(scene.position)
    //渲染
    document.getElementById('continer').appendChild(render.domElement)
    render.render(scene, camera)

    function render2() {
        render.render(scene, camera)
        cube.rotateY(0.01)
        window.requestAnimationFrame(render2)
    }

    window.requestAnimationFrame(render2)
}