三種 JS 顏色、金屬度、燈光、着色器在我的手機上不起作用

Question

這是我的 Three.js 代碼。 在這里，我用簡單的 animation 為紅色點光源和帶紋理的圓環編寫了一個簡單的代碼。 但我只有一個黑色的圓環旋轉。

這段代碼中寫的東西不起作用。

<!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>

Answer 1

我做了一個 jsfiddle 並修改了你的代碼以便工作： https://jsfiddle.net/hrm3ab97/show

由於我使用了 jsfiddle，因此我為 three.js 模塊提供了完整的外部路徑。 這使得環面出現了。
如果您的手機不支持默認的 WebGL 2，我將其更改為 WebGL 1，只需從“WebGl1Renderer”中刪除“1”，看看它是否仍然有效。
我將燈進一步移動以完全照亮圓環——除非你只想照亮它的內環。
紋理代碼不完整，因此我修改了加載紋理並應用 map 以工作的方法 - 我從 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();

三種 JS 顏色、金屬度、燈光、着色器在我的手機上不起作用

問題描述

1 個解決方案

解決方案1
0 2021-06-03 20:16:58

三種 JS 顏色、金屬度、燈光、着色器在我的手機上不起作用

問題描述

1 個解決方案

解決方案1 0 2021-06-03 20:16:58

解決方案1
0 2021-06-03 20:16:58