Can we use three.js in wix if yes,How can we implement it?

1 Like

You can install the NPM library from the Package Manager :

can we use it to create webgl content ?

If you can install it, then you should also be able to use it, you have to look for more informations on “three” official-website (what ever it is) you will surely find it in their given APIs-documentations.

U have to add a custom item and add a code like this, works 4 me.

import * as THREE from ‘three’ ;
let render , camera , scene , cube , cube2 , animationRequestId ;

const init = () => {
scene = new THREE . Scene ();

**const**  directionalLight  =  **new**  THREE . DirectionalLight ( 0xffffff ,  1 ); 
**const**  directionalLight2  =  **new**  THREE . DirectionalLight ( 0xffffff ,  1 ); 
directionalLight.position . **set** ( 0 ,  4 ,  2 ); 
directionalLight2.position . **set** ( 0 , - 4 ,  2 ); 
scene . add ( directionalLight ); 
scene . add ( directionalLight2 ); 

cube  =  **new**  createCube ( 0x668cff , { x : - 2 ,  y :  0 ,  z :  0 }) 
cube.rotation.x  +=  0.5 
scene . add ( cube ); 


cube2  =  **new**  createCube ( 0xffffff , { x :  2 ,  y :  0 ,  z :  0 }) 
cube2.rotation.x  +=  0.5 
scene . add ( cube2 ); 

//Estas pueden ser variables
const fov = 60 ;
const aspect = 640/480 ;
const near = 0.1 ;
const far = 100 ;

camera  =  **new**  THREE . PerspectiveCamera ( fov ,  aspect ,  near ,  far ); 
camera.position . **set** ( 0,0,5 ); 

render  =  **new**  THREE . WebGLRenderer ( {  antialias :  **true**  } ); 
render . setSize ( 640 ,  480 ); 
render . render ( scene,camera ); 

animateCube ( cube ); 

animateCube ( cube2 );
return render.domElement ;

}

const createCube = ( hexColor,position ) => {
const geometry = new THREE . BoxGeometry ();
const material = new THREE . MeshPhongMaterial ({ color : hexColor })
const cube = new THREE . Mesh ( geometry , material );
cube.position . set ( position.x,position.y,position.z )

**return**  cube ; 

}

//clase para movimientos aqui mismo

class KeyMovements {

**constructor** (){ 
    **this** . movement  = {}; 
    window . addEventListener ( "keydown" , **this** . down . bind ( **this** )); 
    window . addEventListener ( "keyup" ,  **this** . up . bind ( **this** )); 
} 

isPressed ( keyCode ){ 
**return**  **this** . movement[keyCode ] ?  **this** . movement[keyCode ] :  **false** ; 
} 

down ( e ){ 
**if(this** . movement[e.keyCode ])  **return** ; 
**this** . movement[e.keyCode ] =  **true** ; 
console . log ( "KeyDown:" ,  e.key ,  "KeyCode:" , e.keyCode ); 
} 

up ( e ){ 
**this** . movement[e.keyCode ] =  **false** ; 
console . log ( "KeyUp:" ,  e.key ,  "KeyCode:" , e.keyCode ); 
} 

}

const Movements = new KeyMovements ();
const animateCube = () => {

animationRequestId = requestAnimationFrame ( animateCube );
cube.rotation.x += 0.01 ;
cube.rotation.z += 0.01 ;
cube2.rotation.x += 0.01 ;
cube2.rotation.z += 0.01 ;

//movimiento a la izq
if ( Movements . isPressed ( 37 )){
camera.position.x += 0.1 ;
}

//movimiento arriba  
**if** ( Movements . isPressed ( 38 )){ 
   // camera.position.x += 0.5; 
   camera.position.z  +=  0.1 ; 
} 

 //movimiento a la derecha 
 **if** ( Movements . isPressed ( 39 )){ 
    camera.position.x  -=  0.1 ; 
} 

  //movimiento abajo 
  **if** ( Movements . isPressed ( 40 )){ 
    //camera.position.x -= 0.5; 
    camera.position.z  -=  0.1 ; 
} 

//camera.lookAt(cube.position);      
render . render ( scene,camera ); 

}

class PinkThreeJS extends HTMLElement {
constructor (){
super ();
}

connectedCallback (){ 
    **this** . appendChild(init ()); 
    **this** . addEventListener ( 'click' , () => { 
        **this** . dispatchEvent ( **new**  CustomEvent ( 'clickedCanvas' )); 
    }) 
} 
attributeChangedCallback ( name ,  oldValue ,  newValue ) { 
    **if** ( name  ===  'animation' ){ 
        cancelAnimationFrame ( animationRequestId ); 
    } 
} 
static  **get**  observedAttributes (){ 
    **return**  [ 'animation' ]; 
} 

}

customElements . define ( ‘threejs-cube’ , ThreeJS );