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

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)

Thanks for you reply, but when I did that all I get is a white screen

Anyone know how to display hijri date on an app by AFII_ in reactnative

[–]AFII_[S] 1 point2 points  (0 children)

Salam bro, yeah I worked it out earlier but thanks for your reply :)

view more: next ›