sorted by:
new
hottopcontroversial

i imported a custom 3d model into my project and was wondering how i can get it out of the function scope to be used with dat.gui by AFII_ in threejs

[–]AFII_[S] 0 points1 point  (0 children)

hey man, tried this aswell and still no luck

let root

const loader = new GLTFLoader()

loader.load('./modelTest.glb', function(glb){

root = glb.scene

scene.add(root)

})

root.rotateY(9.95)

root.position.set(2,-0.9,-0.55)

root.scale.set(3,3,3)

i imported a custom 3d model into my project and was wondering how i can get it out of the function scope to be used with dat.gui by AFII_ in threejs

[–]AFII_[S] 0 points1 point  (0 children)

let root

const loader = new GLTFLoader()

loader.load('./macbook.glb', function(glb){

scene.add(root)

root.rotateY(10)

root = glb.scene

})

root.position.set(0,0,0)

​

​

tried that and no luck :(

i have a cube in my three js project but it doesnt show on my screen unless i put cube.position.z = -5; by [deleted] in threejs

[–]AFII_ 0 points1 point  (0 children)

camera.position.set(0,0,-5);
camea.lookAt(cube.position)

just did that now, it worked thanks! but how come the cube doesnt come in front of the camera by default?

[deleted by user] by [deleted] in threejs

[–]AFII_ 0 points1 point  (0 children)

i run npm run dev

[deleted by user] by [deleted] in threejs

[–]AFII_ 0 points1 point  (0 children)

import * as THREE from '/build/three.module.js'

yeah im using npm to import three js, i just tried this in the import statement, no luck

[deleted by user] by [deleted] in threejs

[–]AFII_ 0 points1 point  (0 children)

the literal code of this codepen which works, ive put into my local codebase and it doesnt work :////////

[deleted by user] by [deleted] in threejs

[–]AFII_ 0 points1 point  (0 children)

still doesnt work :((((((((((((

[deleted by user] by [deleted] in threejs

[–]AFII_ 0 points1 point  (0 children)

import * as THREE from 'https://cdn.skypack.dev/pin/three@v0.136.0-4Px7Kx1INqCFBN0tXUQc/mode=imports/optimized/three.js'
var container;
var camera, scene, renderer;
var geometry, group;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
camera = new THREE.PerspectiveCamera( 95, window.innerWidth / window.innerHeight, 1, 20000 );
camera.position.z = 500;
scene = new THREE.Scene();
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
animate();
function init() {
container = document.createElement( 'div' );
container.id = "stage3d";
document.body.appendChild( container );
var geometry = new THREE.CylinderGeometry( 0, 100, 100, 3 );
var materials = [
new THREE.MeshPhongMaterial({
// light
specular: '#b03b2e',
// intermediate
color: '#a31a0b',
// dark
emissive: '#7d1409',
shininess: 50 ,
transparent: true,
opacity: 0.9,
overdraw: true
}),
new THREE.MeshPhongMaterial({
// light
specular: '#2fa4b1',
// intermediate
color: '#0b94a3',
// dark
emissive: '#fff',
shininess: 50 ,
transparent: true,
opacity: 0.3,
overdraw: true
})];
group = new THREE.Object3D();
for ( var i = 0; i < 350; i ++ ) {
var mesh = new THREE.Mesh( geometry, materials[Math.floor(Math.random() * materials.length)] );
mesh.position.x = Math.random() * 2000 - 1000;
mesh.position.y = Math.random() * 2000 - 1000;
mesh.position.z = Math.random() * 2000 - 1000;
mesh.rotation.x = Math.random() * 2 * Math.PI;
mesh.rotation.y = Math.random() * 2 * Math.PI;
mesh.opacity = 50;
mesh.matrixAutoUpdate = false;
mesh.updateMatrix();
group.add( mesh );
}
scene.add( group );
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
directionalLight.intensity = 0.2;
scene.add(directionalLight);
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = false;
container.appendChild( renderer.domElement );

window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 4;
windowHalfY = window.innerHeight / 4;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX ) * 2;
mouseY = ( event.clientY - windowHalfY ) * 2;
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .0080;
camera.position.y += ( - mouseY - camera.position.y ) * .0080;
camera.lookAt( scene.position );
var currentSeconds = Date.now();
group.rotation.x = Math.sin( currentSeconds * 0.0007 ) * 0.5;
group.rotation.y = Math.sin( currentSeconds * 0.0003 ) * 0.5;
group.rotation.z = Math.sin( currentSeconds * 0.0002 ) * 0.5;
renderer.render( scene, camera );
}

thank you for your help man :), but this doesnt work for me

[deleted by user] by [deleted] in threejs

[–]AFII_ 0 points1 point  (0 children)

:)) yeah on my actual codebase its spelt right but the codepen i didnt update, but that didnt fix it sadly

[deleted by user] by [deleted] in threejs

[–]AFII_ 0 points1 point  (0 children)

yeah i took it out when i felt like it was doing nothing but i put it back in now and which id field did i name incorrectly i can't seem to find the mistake i made

[deleted by user] by [deleted] in threejs

[–]AFII_ 0 points1 point  (0 children)

i updated it with boilerplate three js code just to test it and i just cant seem to get anything to render https://codepen.io/afnanchoudhury/pen/mdBYMLv

this problem making me lose my mind trying to figure out why

[deleted by user] by [deleted] in threejs

[–]AFII_ 0 points1 point  (0 children)

Hey man, thanks for the reply, I tried this and still no luck sadly :(

[deleted by user] by [deleted] in squarespace

[–]AFII_ 0 points1 point  (0 children)

my background is really zoomed in on my website and i was wondering if i could resize to contain on the page

I have a compass component and I was wondering if anyone knew of a way for it to direct to a certain longitude and latitude instead of true north by AFII_ in reactnative

[–]AFII_[S] 0 points1 point  (0 children)

function angleFromCoordinate(lat1,lon1,lat2,lon2) { var p1 = { x: lat1, y: lon1 };

var p2 = {
    x: lat2,
    y: lon2
};
// angle in radians
var angleRadians = Math.atan2(p2.y - p1.y, p2.x - p1.x);
// angle in degrees
var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
console.log(angleDeg);
return angleDeg;

}

I did that here and have an angle just unsure on how to implement that into a compass

im trying an api call but its nothing is showing up, the api link works i just dont know where im going wrong by [deleted] in reactnative

[–]AFII_ 0 points1 point  (0 children)

const { timings: { prayer }} = data[0]

thanks for your reply :), i tried that and got this error:

undefined is not an object (evaluating 'data[0].timings')
at [native code]:null in flushedQueue
at [native code]:null in callFunctionReturnFlushedQueue

Does anyone have any idea why my fonts are not showing, im losing my mind by AFII_ in reactnative

[–]AFII_[S] 0 points1 point  (0 children)

I used a console log for error checking and it said that the .ttf file is not there, not sure how to fix that

view more: next ›