three.js 相关问题

这是我的 HTML、CSS、JAVASCRIPT (THREE.JS) 代码。您能否分析代码并检查我在标题中放入的所需输出。 //**HTML代码** 这是我的 HTML、CSS、JAVASCRIPT (THREE.JS) 代码。您能分析一下代码并检查我在标题中放入的所需输出吗？ //**HTMLCODE** <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <link rel="stylesheet" href="/src/index.css" /> <script type="importmap"> { "imports": { "three": "https://unpkg.com/[email protected]/build/three.module.js", "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/" } } </script> <meta name="description" content="Web site created using create-react-app" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <title>EXAMPLE</title> </head> <body> <div id="root"></div> <div class="globe-render" id="globe-render"> <script type="module" src="./globe.js"></script> </div> </body> </html> **//CSS CODE:** @tailwind base; @tailwind components; @tailwind utilities; body { background-color: #000f14; margin: 0; position: relative; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } #globe-render { position: absolute; top: -20%; left: 20%; background-color: rgb(255, 255, 255); } #myCanvas { position: absolute; background-color: green; } //JS CODE import * as THREE from "three"; import { OrbitControls } from "three/addons/controls/OrbitControls.js"; import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js"; import { RenderPass } from "three/addons/postprocessing/RenderPass.js"; import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js"; //Radius define let ParticleSurfaceLayer = 7.5; let GlobeRadius = 6.6; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer({ alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); const container = document.querySelector(".globe-render"); renderer.setClearColor(0x000000,0); container.appendChild(renderer.domElement); // Group for globe and particle system const group = new THREE.Group(); scene.add(group); // Bloom pass for the globe const renderScene = new RenderPass(scene, camera); const globeBloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85 ); globeBloomPass.threshold = 0; globeBloomPass.strength = 2; globeBloomPass.radius = 0; const globeComposer = new EffectComposer(renderer); globeComposer.setSize(window.innerWidth, window.innerHeight); globeComposer.addPass(renderScene); globeComposer.addPass(globeBloomPass); // Bloom pass for particles const particleComposer = new EffectComposer(renderer); particleComposer.setSize(window.innerWidth, window.innerHeight); particleComposer.addPass(new RenderPass(group, camera)); // Assuming 'group' contains particles const particleBloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85 ); particleBloomPass.threshold = 0; particleBloomPass.strength = 1.3; particleBloomPass.radius = 0.8; particleComposer.addPass(particleBloomPass); // Update size function function updateSize() { const newWidth = window.innerWidth; const newHeight = window.innerHeight; camera.aspect = newWidth / newHeight; camera.updateProjectionMatrix(); renderer.setSize(newWidth, newHeight); const sphereRadius = Math.min(newWidth, newHeight) * 0.1; globe.geometry = new THREE.SphereGeometry(sphereRadius, 32, 32); const particleSizeMin = Math.min(newWidth, newHeight) * 0.001; const particleSizeMax = Math.min(newWidth, newHeight) * 0.004; group.children.forEach((particle) => { const randomSize = THREE.MathUtils.randFloat( particleSizeMin, particleSizeMax ); particle.scale.set(randomSize, randomSize, randomSize); }); // Update composer sizes globeComposer.setSize(newWidth, newHeight); particleComposer.setSize(newWidth, newHeight); } //orbit controls const controls = new OrbitControls(camera, renderer.domElement); const loader = new THREE.TextureLoader(); controls.enableZoom = false; // controls.enabled=false // Initial setup //////// const geometry = new THREE.SphereGeometry(GlobeRadius, 80, 80); const material1 = new THREE.MeshBasicMaterial({ map: loader.load("./8k_earth_nightmap_underlayer.jpg"), //transparent: true, opacity: 1, }); const material2 = new THREE.MeshBasicMaterial({ color: 0xff047e, transparent: true, opacity: 0.1, }); const multimaterial = [material1, material2]; const globe = new THREE.Mesh(geometry, material1); globe.layers.set(1); group.add(globe); // Particle System const particleCount = 600; const color = new THREE.Color("#fc2414"); for (let i = 0; i < particleCount; i++) { // ... (same as your code) const phi = Math.random() * Math.PI * 2; const theta = Math.random() * Math.PI - Math.PI / 2; const randomradius = 0.01 + Math.random() * 0.04; const radius = ParticleSurfaceLayer; // Radius of the sphere const x = radius * Math.cos(theta) * Math.cos(phi); const y = radius * Math.cos(theta) * Math.sin(phi); const z = radius * Math.sin(theta); const particleGeometry = new THREE.SphereGeometry(randomradius, 30, 25); // Initial size const particleMaterial = new THREE.MeshBasicMaterial({ color: "#00FFFF", }); const particle = new THREE.Mesh(particleGeometry, particleMaterial); particle.position.set(x, y, z); particle.layers.set(1); group.add(particle); } const ambientLight = new THREE.AmbientLight(0xffffff, 100); scene.add(ambientLight); // Camera position camera.position.z = 15; // Rotation animation const rotationSpeed = 0.001; // Animation function const animate = function () { requestAnimationFrame(animate); group.rotation.y += rotationSpeed; // Render globe with bloom effect camera.layers.set(1); globeComposer.render(); // Render particles with bloom effect particleComposer.render(); }; ///////orbit controls///* let isDragging = false; let originalRotation = group.rotation.y; // Event listener for mouse down renderer.domElement.addEventListener("mousedown", () => { isDragging = true; }); // Event listener for mouse up renderer.domElement.addEventListener("mouseup", () => { isDragging = false; // Reset the rotation to its original position group.rotation.y = originalRotation; }); // Event listener for mouse leave (in case mouse leaves the canvas while dragging) renderer.domElement.addEventListener("mouseleave", () => { if (isDragging) { isDragging = false; // Reset the rotation to its original position group.rotation.y = originalRotation; } }); // Handle window resize window.addEventListener("resize", updateSize); // Start animation animate(); const canvas = document.querySelector("canvas"); canvas.id = "myCanvas"; canvas.classList.add("myCanvasClass"); 我在js中尝试了setClearColor，在canvas的css块中尝试了透明。我希望画布从黑色背景转换为透明。请有人帮忙。我认为，您使用的通行证可能有问题。如果删除这些通行证仍然不起作用？因为有些通行证可能存在透明度问题。尝试设置 webgl 目标并添加 RGBA 格式，它应该有助于解决问题。有示例代码，这应该有助于提高透明度。 const canvas = this.renderer.domElement; const width = canvas.clientWidth * this.pixelRatio | 0; const height = canvas.clientHeight * this.pixelRatio | 0; const parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false }; const renderTarget = new THREE.WebGLRenderTarget(width, height, parameters); renderTarget.texture.encoding = QUnityCore.instance.renderManager.renderer.outputEncoding const composer = new EffectComposer(this.renderer, renderTarget); composer.renderToScreen = false; 或者您可以在此线程中找到更多信息。我希望这对你有帮助。

javascript three.js html5-canvas

回答 1 投票 0

为什么不允许 Three.js 在控制台中打印输出？

看，就像我将“two.cjs”文件链接到“index.html”文件的方式 2.这将是我从“ Threejs.org”下载的安装文件 3.据我回忆...

javascript three.js

回答 1 投票 0

如何在R3F中自动设置好相机位置

我正在构建一个模型查看器，显然每当我加载 3D 模型（类型：GLB）时，相机位置就会变得混乱。我见过其他在线 3D 模型查看器，他们都以某种方式设法...

next.js three.js react-three-fiber

回答 1 投票 0

如何安装 Three.js？

我想使用 Three.js，并且想下载它，但是当我在 Three.js 网站上单击“下载”时，我会得到一个包含很多内容的文件夹：从查看这个文件夹

javascript three.js

回答 4 投票 0

在画布与页面内容的其余部分之间同步滚动很困难

我目前正在开发一个项目，该项目涉及带有 OrbitControls 的 Three.js 画布，用于交互式 3D 可视化。但是，我在 Three.js 之间同步滚动时遇到困难

javascript html css three.js

回答 1 投票 0

此浏览器无法识别标签 <mesh>。如果您打算渲染 React 组件，请以大写字母开头

我在 next.js 14 中有这个组件 /* 自动生成：https://github.com/pmndrs/gltfjsx 命令：npx [email protected] mystic+ethereum+in+place+vertical.gltf --transform 文件：神秘+以太坊+in...

next.js three.js react-three-fiber react-three-drei next.js14

回答 1 投票 0

图像未显示在 cloudflare 页面上

我使用vite和node创建了一个THREE.js应用程序。然而，当我在开发环境中时，一切都运行良好，但是当我使用以下命令将其部署到 Cloudflare 页面时：维特构建作为我的构建逗号...

node.js three.js cloudflare vite

回答 2 投票 0

如何将大 gltf 文件转换为 jsx？

我在搅拌机中有一个 3D 场景，想在我的 React 三纤维项目中使用它，但导出到 gltf 后，我在文件中发现了 300k 行。该文件在正常的 Threejs 中工作正常，但是当我执行时...

javascript reactjs three.js react-three-fiber gltf

回答 2 投票 0

动态更改MeshBasicMaterial不透明度

{ “进口”：{ “三”：“https://unpkg.com/ [email protected]/build/ Three.module.js”， “三/</desc> <question vote="0"> <pre><code><script type="importmap"> { "imports": { "three": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" data-cfemail="a4d0ccd6c1c1e4d2948a9592968a94">[email protected]</a>/build/three.module.js", "three/addons/": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" data-cfemail="d5a1bda7b0b095a3e5fbe4e3e7fbe5">[email protected]</a>/examples/jsm/" } } </script> <script type="module"> import * as THREE from 'three'; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.z = 10; camera.position.x = -5; const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); const geometry = new THREE.BoxGeometry( 2, 2, 2 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); const cube = new THREE.Mesh( geometry, material ); scene.add( cube ); material.opacity = 0.2; material.transparent = true; function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); } animate(); </script> </code></pre> <p>以上工作，立方体的不透明度正在改变，但如果移动<pre><code>material</code></pre>更新到setTimeout函数，如：</p> <pre><code>// material.opacity = 0.2; // material.transparent = true; var tmout = function() { material.opacity = 0.2; material.transparent = true; } setTimeout(tmout, 1000 ); </code></pre> <p>那么不透明度不会改变。为什么 <pre><code>material</code></pre> 在 setTimeout 内没有改变？这里有什么不正确的吗？</p> </question> <answer tick="false" vote="0"> <p>使用箭头函数从调用模块内捕获 this 的上下文。 ́\<em>(ツ)</em>/́</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>import * as THREE from 'three'; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 10; camera.position.x = -5; const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const geometry = new THREE.BoxGeometry(2, 2, 2); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); material.opacity = 1; material.transparent = true; function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); setTimeout(() => { this.material.opacity = 0.2; this.material.transparent = true; }, 1000); } animate();</code></pre> </div> </div> <p></p> </answer> </body></html>

javascript three.js

回答 0 投票 0

为什么我加载有材质的 GLTF 模型时得到的是黑色模型？

我正在尝试加载具有glb 格式的3D 模型。这是代码：我除了什么：图像我有什么：图片 var renderer = new THREE.WebGLRenderer(); 渲染器.setSize(1000, 1000); 渲染器。

javascript html web three.js gltf

回答 1 投票 0

Blender 模型在 THREE.js 中看起来完全不同

我想在我的网站上使用一个 Blender 模型，我在其中使用 THREE.js，但是当我加载 GLTF 文件时，它看起来损坏了。东西丢失或位置错误，灯光也似乎......

javascript reactjs three.js blender

回答 1 投票 0

ExtrudeBufferGeometry 导致输出旋转

我正在尝试挤出一些形状，但是我发现挤出后，输出看起来像是旋转了一点。我渲染了三角形的实际形状和挤压形状......