Three default

by John_Constantine

JavaScript

console.clear();
import * as THREE from 'https://threejs.org/build/three.module.js';
import { GUI } from 'https://threejs.org/examples/jsm/libs/dat.gui.module.js';
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';

let camera, scene, renderer;

let clock = new THREE.Clock();
init();
renderer.setAnimationLoop(render);

function init() {

  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.setClearColor(0x204040);
  document.body.appendChild( renderer.domElement );

  scene = new THREE.Scene();
  
  let axis=  new THREE.AxesHelper(2)
  scene.add(axis)

  camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 200 );

  camera.position.set(3,3,3 );;

  let controls = new OrbitControls( camera, renderer.domElement );
  controls.enablePan = false;

  let pointLight = new THREE.PointLight(0xffffff)
  pointLight.position.set(0, 10, 0);
  scene.add(pointLight)

  pointLight = new THREE.PointLight(0xffffff)
  pointLight.position.set(15, 1, 0);
  scene.add(pointLight)

  pointLight = new THREE.PointLight(0xffffff)
  pointLight.position.set(4, 0, 13);
  scene.add(pointLight)

  // coding here
	const geometry = new THREE.BoxGeometry( 1, 1, 1 )
  const material = new THREE.MeshLambertMaterial( {color: 0x1E90FF} )
  const cube = new THREE.Mesh( geometry, material )
  scene.add( cube )

  const shape1 = new THREE.Shape()
  shape1.moveTo(30,5)
  shape1.bezierCurveTo(30,5,10,5,-5,-2)

  const points3D = []

  const points2D = shape1.getPoints(50)

  points2D.forEach(e=>{
    points3D.push(new THREE.Vector3(e.x,e.y,0))
  })

  const geometry1 = new THREE.BufferGeometry().setFromPoints(points3D)
  const material1 = new THREE.LineBasicMaterial( { color: 0x808000 } );
  const mesh = new THREE.Line( geometry1, material1 ) ;
  scene.add( mesh );

	// coding above
 ...