weixin_40919082 2017-11-03 07:50 采纳率: 0%
浏览 1610

用three做demo,阴影有问题

图片说明
源代码如下:
$(function(){
var scene = new THREE.Scene();

        var renderer = new THREE.WebGLRenderer({antialias:true});

        renderer.setClearColor(0xEEEEEE,1.0);
        renderer.setSize(window.innerWidth,window.innerHeight);
        renderer.shadowMap.enabled = true;
        var axes = new THREE.AxesHelper(20);
        scene.add(axes);

        //creat plane
        var planeGeometry = new THREE.PlaneGeometry(60,20);
        var planeMaterial = new THREE.MeshLambertMaterial({color:0xffffff});
        var plane = new THREE.Mesh(planeGeometry,planeMaterial);
        plane.rotation.x = -0.5*Math.PI;
        plane.position.x = 15;
        plane.position.y = 0;
        plane.position.z = 0;
        plane.receiveShadow = true;

        scene.add(plane);
        // creat cube
        var cubeGeometry = new THREE.CubeGeometry(4,4,4);
        var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000,wireframe:true})
        var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);

        cube.position.x = -4;
        cube.position.y = 3;
        cube.position.z = 0;
        cube.castShadow = true;

        scene.add(cube);
        //creat sphere
        var sphereGeometry = new THREE.SphereGeometry(4,4,4);
        var sphereMaterial = new THREE.MeshLambertMaterial({color:0x7777ff,wireframe:true})
        var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

        sphere.position.x = 20;
        sphere.position.y = 4;
        sphere.position.z = 2;
        sphere.castShadow = true;

        scene.add(sphere);

        //add light
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40,60,-10);
        spotLight.castShadow = true;
        scene.add(spotLight);

        // add camera
        var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);

        $("#WebGL-output").append(renderer.domElement);
        renderer.render(scene,camera);
    })
  • 写回答

3条回答 默认 最新

  • Li_LRJ 2020-04-19 22:15
    关注

    可以尝试打开抗锯齿
    renderer.antialias = true;

    评论

报告相同问题?

悬赏问题

  • ¥15 数值计算均差系数编程
  • ¥15 redis-full-check比较 两个集群的数据出错
  • ¥15 Matlab编程问题
  • ¥15 训练的多模态特征融合模型准确度很低怎么办
  • ¥15 kylin启动报错log4j类冲突
  • ¥15 超声波模块测距控制点灯,灯的闪烁很不稳定,经过调试发现测的距离偏大
  • ¥15 import arcpy出现importing _arcgisscripting 找不到相关程序
  • ¥15 onvif+openssl,vs2022编译openssl64
  • ¥15 iOS 自定义输入法-第三方输入法
  • ¥15 很想要一个很好的答案或提示