4

three.jsについて学んでいます。

練習用の例を作成しましたが、アイテムの影が間違っているか、奇妙に見えます。

これは私の問題です: 影

このようにする必要があります (この画像は古いチュートリアルのものです):

良い影

コードは次のとおりです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.js"></script>

<div id="WebGL-salida">
</div>

<script type="text/javascript">
  $(function() {
    var scene = new THREE.Scene();

    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();

    var color = new THREE.Color("rgb(200, 250, 250)");
    renderer.setClearColor(new THREE.Color(color));
    renderer.setSize(window.innerWidth, window.innerHeight);

    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap


    var ejesAyuda = new THREE.AxesHelper(20); //son los ejes de ayuda creo
    scene.add(ejesAyuda);

    var planeGeometry = new THREE.PlaneGeometry(60, 20);

    var planeMaterial = new THREE.MeshLambertMaterial({
      color: 0xcccccc
    });

    var plane = new THREE.Mesh(planeGeometry, planeMaterial);

    plane.receiveShadow = true;


    plane.rotation.x = -0.5 * Math.PI; // -90º
    plane.position.x = 15;
    plane.position.y = 0;
    plane.position.z = 0;

    scene.add(plane);


    var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);


    var cubeMaterial = new THREE.MeshLambertMaterial({
      color: 0xff0000
    });
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

    cube.castShadow = true; //con esto le indicamos que queremos que emita sombra

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

    scene.add(cube);

    var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
    var sphereMaterial = new THREE.MeshLambertMaterial({
      color: 0x7777ff
    });
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

    sphere.castShadow = true; //con esto le indicamos que queremos que emita sombra

    sphere.position.x = 20;
    sphere.position.y = 4;
    sphere.position.z = 2;
    scene.add(sphere);

    camera.position.x = -30;
    camera.position.y = 40;
    camera.position.z = 30;
    camera.lookAt(scene.position);

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

    $("#WebGL-salida").append(renderer.domElement);
    renderer.render(scene, camera);
  });
</script>

また、良い初心者用の three.js チュートリアルまたはコース (無料でなくてもかまいません) について知っている場合は、教えてください。このwebGLの世界で:)

4

2 に答える 2

0

セグメント数を増やすこともできます。今あなたが持っている

var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);

これらの 2 つの '20's は、良好なレンダリングのためにわずかに低くなっています。私は通常32、32を使用します

于 2017-12-28T21:11:36.490 に答える