Categories
Mastering Development

Mousemove event with three.js and gsap

I am trying to do a mousemove event where the mesh would scale when the mouse hovers over it and then it goes back to its original size when the mouse no longer hovers above it. So I’ve been looking at other examples and they don,t use gsap. The closest one I’ve seen is tween.js […]

Categories
Development

Error Importing three.js through npm and browserify

i’m very new to npms and i’m trying to import three.js into my scene but it is coming up with this error despite stating the type = “module” in my script tag in my html I installed it through an npm and here is my javascript: var $ = require(‘jquery’); var three = require(‘three’); import […]

Categories
Development

Error Importing three.js through npm and browserify

i’m very new to npms and i’m trying to import three.js into my scene but it is coming up with this error despite stating the type = “module” in my script tag in my html I installed it through an npm and here is my javascript: var $ = require(‘jquery’); var three = require(‘three’); import […]

Categories
Development

Loading a Collada (dae) model from Assimp shows incorrect normals

I am trying to correctly load a collada (dae) file in Assimp, but the normals seem to come out wrong. I would like help with figuring this out. I have a feeling it is to do with how I am handling the transformation matrix. As an example, here’s a screenshot of the OpenGL application loading […]

Categories
Development

Best method to get Outline effect with animated skinned mesh

What is the best method to get the outline effect with animated skinned mesh? An example with the model paused at a specific pose: https://jsfiddle.net/Eketol/uev9o0qp/ composer = new THREE.EffectComposer( renderer ); renderPass = new THREE.RenderPass(scene, camera); renderPass.setSize(window.innerWidth, window.innerHeight); composer.addPass(renderPass); outlinePass = new THREE.OutlinePass( new THREE.Vector2( this.viewWidth, this.viewHeight ), scene, camera ); outlinePass.visibleEdgeColor.set( 0xff0000 ); outlinePass.hiddenEdgeColor.set( […]

Categories
Development

How to use Three JS with Angular 7

I am using an Angular 7 and I want to add Three JS Thee JS with my project, but It’s turned out not quite really works. I am not sure that I did it correctly. Please guy me the way This is my code ngAfterViewInit(): void { let script = this._renderer2.createElement(‘script’); script.type = `text/javascript`; script.text […]

Categories
Development

Uncaught TypeError: Cannot read property ‘rotation’ of undefined

new to three.js I am following the documentation and when I come to this point: function animate(renderer, scene, camera, cube) { requestAnimationFrame( animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); } function init() { var scene = new THREE.Scene(); //setup scene var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);//setup camera; […]

Categories
Development

Difference between camera LookAt and camera up in Three JS

I’m confused about what effect changing the camera.lookAt and camera.up vector has in three.js. In this jsfiddle, I’m having camera.up = new THREE.Vector3(0, 0, 1); ,but when I update my controls the rotation of the object is occuring weird. So, what is the difference between camera lookAt and up direction? var camera, scene, renderer, geometry, […]

Categories
Development

ThreeJS Editor Transparent Background

I’m using the https://threejs.org/editor/ to export a webgl animation and I’m trying to figure out how to convert it to have a transparent background. I’m essentially trying to put a div with text behind my animating threejs render. I tried adding renderer = new THREE.WebGLRenderer( { alpha: true,} ); renderer.setClearColor( 0xffffff, 0 ); but it […]

Categories
Development React

How to import TrackballControls from three.js module using react?

I am using react js boiler plate (create-react-app) and imported three.js. I am trying to use TrackballControls for a particular project but it isn’t working. It throws an error like “Attempted import error: ‘TrackballControls’ is not exported from ‘three’ (imported as ‘THREE’)” . Now I understand that it is in the examples folder and it’s […]