Subj. How to achieve perspective 3D text goes through another object in the scene? Text background should be transparent. Bonus question: how do I turn that text into animated ticker? I've tried CSS3DRenderer, but can't make text background transparent:
fragment code : export const fragment = `varying vec2 vUv; uniform vec2 viewport; uniform vec2 uMouse; float createCircle() { vec2 viewportUv = gl_FragCoord.xy / viewport; float viewportAspect = viewport.x / viewport.y; vec2 mousePoint = vec2(uMouse.x, 1.0 - uMouse.y); float circleRadius…
I have this JS code, I am trying to center my object inside the div for my website. However I am unable to do it. I have tried posted solution but they did not work. I appreciate your help. import…
I need to rotate and scale UVs in a vertex shader such that the rotated texture fills its available bounding box. The following test implementation successfully rotates and auto-scales the texture but the image gets skewed / distorted as the…
I need to illuminate a sphere with two directional lights, one in front to illuminate the front of the sphere like sunlight. And one towards the back to display the light of the cities. To do this, I play with…
Ive been trying to link my three.js function into html so that when an element is clicked by the mouse the js function runs in the external js file. I thought i had done everything right and followed correct steps…
I started to use ThreeJS a few months ago and that lead me to webgl. I watched a bunch of courses on youtube but most of them are oriented to 3d compositions. So far I got a basic understanding of…
so I got myself a 3d model of a umbrella which already comes with a animation which opens and closes it. Now i imported it into my project using Three.js and played the animation. Using the code I found out…
I'm trying to use a mesh I created in blender in threejs. The event log shows the file is being loaded but I cannot see it. Instead there is just a black screen. How do I go about this to…
import Spline from '@splinetool/react-spline'; import { useRef } from 'react'; export default function App() { function onLoad(spline) { const obj = spline.findObjectByName('Clink'); // console.log(spline.style) spline.style = {width:"100vw"} // spline.camera.position.z = 0 // spline.canvas.width = "1920px" // let can = Object.keys(spline.canvas)…