javascript - 三种 JS 颜色、金属度、灯光、着色器在我的手机上不起作用

问题描述

这是我的 Three.js 代码。在这里，我为红色、点光源和带有简单动画的纹理圆环编写了一个简单的代码。但我只有一个黑色的圆环旋转。

这段代码中写的东西不起作用。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ThreeJS Starter</title>
<style>
body{
  margin: 0;
  background-color: #242424;
}
</style>
</head>
<body>
<script type="module">

   import * as THREE from '../build/three.module.js';
   import { MeshStandardMaterial } from '../src/materials/MeshStandardMaterial.js';


//scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 1000 );

        const renderer = new THREE.WebGLRenderer({
          alpha : true
        });
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        const geometry = new THREE.TorusGeometry(12,3,140,100);
        
        const texture = new  THREE.TextureLoader().load('../examples/textures/golf.jpg');

    const light = new THREE.PointLight(0xffffff);
  light.position.set(2,3,4);
  scene.add(light);

        const material = new THREE.MeshStandardMaterial({
          color: 0xff0000,
          roughness: 0.5,
          metalness: 0.75
        });
        
        const cube = new THREE.Mesh( geometry, material );
        scene.add( cube );

        camera.position.z = 60;

        const animate = function () {
            requestAnimationFrame( animate );

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render( scene, camera );
        };

        animate();
</script>
</body>
</html>

标签： javascripthtmlnode.jsthree.jswebgl

我做了一个 jsfiddle 并修改了你的代码以便工作： https ://jsfiddle.net/hrm3ab97/show

由于我使用了 jsfiddle，因此我为 three.js 模块提供了完整的外部路径。这使得环面出现了。
如果您的手机不支持默认的 WebGL 2，我将其更改为 WebGL 1，只需从“WebGl1Renderer”中删除“1”，看看它是否仍然有效。
我将灯进一步移动以完全照亮圆环——除非你只想照亮它的内环。
纹理代码不完整，因此我修改了加载纹理并应用地图的方法以工作 - 我从 three.js 示例网站中选择了一个随机纹理，因为它们不限制跨域使用。如果您从材质中移除“地图”，您将看到简单的红色材质颜色。

从 jsfiddle 链接中删除“显示”以禁用全屏并查看代码。stackoverflow 编辑器中有一个错误会阻止完整的 HTML 代码出现，所以我在这里省略了它。

    import * as THREE from 'https://threejs.org/build/three.module.js';


    //scene
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 10, 1000 );

    const renderer = new THREE.WebGL1Renderer({
      alpha : true
    });
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    const geometry = new THREE.TorusGeometry(12,3,140,100);

    const map = new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/uv_grid_opengl.jpg' );
            map.wrapS = map.wrapT = THREE.RepeatWrapping;

    const material = new THREE.MeshStandardMaterial({  
      roughness: 0.5,
      metalness: 0.75,
      map: map, 

    });

    const light = new THREE.PointLight(0xffffff);
    light.position.set(20,30,40);
    scene.add(light);

    const torus = new THREE.Mesh( geometry, material );
    scene.add( torus );

    camera.position.z = 40;

    const animate = function () {
        requestAnimationFrame( animate );

        torus.rotation.x += 0.01;
        torus.rotation.y += 0.01;

        renderer.render( scene, camera );
    };

    animate();

javascript - 三种 JS 颜色、金属度、灯光、着色器在我的手机上不起作用

问题描述

解决方案

推荐阅读