MeshStandardMaterial color render error

Questions
,
1

I set color to ‘red’,but rendered to black,anyone encountered this?

        var scene;
           var mouse;
           var raycaster;
           var camera;
           var renderer;
           var cube;
           var sphere;
           var cylinder;
           var cone;
           var pipe;
           var group;
        window.onload = function(){
          scene = new THREE.Scene();
          scene.background = new THREE.Color(0xf0f0f0);
          var axes = new THREE.AxesHelper(100);
          scene.add(axes);
          camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 10000);
          //  var camera = new THREE.CubeCamera( 1, 100000, 128 );
          raycaster = new THREE.Raycaster();
          mouse = new THREE.Vector2();

          renderer = new THREE.WebGLRenderer();

          group = new THREE.Group();
          renderer.setSize(window.innerWidth, window.innerHeight);
          document.getElementById('app').appendChild(renderer.domElement);


          var conegeometry = new THREE.CylinderGeometry(3, 5, 10, 32);
          var conematerial = new THREE.MeshStandardMaterial( { color:'red' } );
          cone = new THREE.Mesh(conegeometry, conematerial);
          cone.position.set(0, 40, 50)


          scene.add(cone);


          camera.position.set(20, 10, 150);
          
          window.addEventListener('click', onMouseMove, false);

          requestAnimationFrame(animate);
        }
     

          var animate = function () {
            requestAnimationFrame(animate);
            // 通过摄像机和鼠标位置更新射线
         
            cone.rotation.x += 0.01;
            cone.rotation.y += 0.01;

        
            renderer.render(scene, camera);
          };

          function onMouseMove(event) {
            event.preventDefault();
            // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)

            //     mouse.x = ( event.clientX / renderer.domElement.width) * 2 - 1;
            //    mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
            mouse.x = ((event.clientX - renderer.domElement.getBoundingClientRect().left) / renderer.domElement.offsetWidth) * 2 - 1;
            mouse.y = -((event.clientY - renderer.domElement.getBoundingClientRect().top) / renderer.domElement.offsetHeight) * 2 + 1;

            raycaster.setFromCamera(mouse, camera);

    // 计算物体和射线的焦点
            let intersects = raycaster.intersectObjects(group.children);

            for (var i = 0; i < intersects.length; i++) {
              intersects[i].object.material.color.set(0x6699ff);
            }
          }

          // animate();
2

Try to add some lights to your scene: For example:

var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
scene.add( ambientLight );

var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
camera.add( pointLight );
scene.add( camera );

Or use an unlit material like MeshBasicMaterial.

1 Like