3d RollingBoll

Edit

**category: other**, **direction: demo**, **group: threejs**

Ctrl + S : Update

class CanvEl{

canv = null
    body = null

timestep = 10 // ms

ww = 0
    wh = 0
    w = 300
    h = 200
    spt = 0 // start top
    spr = 400 // start right
    spl = 400 // start right

x = 0
    y = 0
    speed = {'x':1, 'y':1}

constructor(c){
        this.init(c);
    }
    init(c){
        this.body = document.getElementsByTagName('body')[0]

if(!c)this.initCanv()
        else this.canv = c
        this.updateWind()
        this.initMove()
    }
    initCanv(){
        this.canv = document.createElement('canvas')
        this.canv.id = 'd3canv'
        this.canv.style.position = 'absolute'
        this.canv.style.top = '' + this.spt + 'px'
        // this.canv.style.right = '' + this.spr + 'px'
        this.canv.style.left = '' + this.spl + 'px'
        this.canv.style.width = '' + this.w + 'px'
        this.canv.style.height = '' + this.h + 'px'

this.x = this.spl
        this.y = this.spt
        this.upPos()

this.canv.style.backgroundColor = '#00000035'
        this.canv.style.backgroundColor = '#66142b35'

this.body.appendChild(this.canv)

}
    updateWind(){
        this.ww = window.innerWidth
        this.wh = window.innerHeight
    }
    upPos(){
        this.canv.style.top = '' + this.y + 'px'
        this.canv.style.left = '' + this.x + 'px'
    }
    step(){
        this.step_v1()

}
    step_v1(){
        this. x += this.speed['x']
        this. y += this.speed['y']

if( this.x < 0 ){
            this.x = 0;
            this.speed['x'] = this.speed['x'] * -1
        }
        if( this.y < 0 ){
            this.y = 0;
            this.speed['y'] = this.speed['y'] * -1
        }
        if( this.x > (this.ww - this.w) ){
            this.x = this.ww - this.w;
            this.speed['x'] = this.speed['x'] * -1
        }
        if( this.y > (this.wh - this.h) ){
            this.y = this.wh - this.h;
            this.speed['y'] = this.speed['y'] * -1
        }

this.upPos()
        // this.log()

}
    log(){
        let log={}
        log['ww'] = this.ww
        log['wh'] = this.wh
        // log['w'] = this.w
        // log['h'] = this.h
        log['x'] = this.x
        log['y'] = this.y
        log['speed'] = this.speed
        console.log('D3:', log)
    }
    move(){
        //console.log('go')
        this.step()
    }
    initMove(){
        this.timer = setInterval(this.move.bind(this), this.timestep)
    }
}

console.log('++++++++++++++ d3')
console.log('mashUrl')
// grandarsOpt/mash/001/cube.mtl
// let mashUrl = chrome.extension.getURL('mash/001/cube.mtl')
console.log(mashUrl)

import * as THREE from 'three';
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// const canvas = document.querySelector( '#c' );
// const renderer = new THREE.WebGLRenderer( { antialias: true, canvas } );

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, 1, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
    // , canvas
});
camera.position.set(10, 15, 10);
camera.position.set(0, -10, 10);
camera.lookAt(0, 0, 0);
var canvas = renderer.domElement
let carousel_slide_one = document.getElementById('carousel_slide_one')
if(carousel_slide_one){
    carousel_slide_one.appendChild(canvas);
}
// document.body.appendChild(canvas);

// let c = new CanvEl(canvas)

// canvas.style.position = 'fixed'
canvas.style.top = '' + 0 + 'px'
// this.canv.style.right = '' + this.spr + 'px'
canvas.style.left = '' + 0 + 'px'
// canvas.style.width = '' + this.w + 'px'
// canvas.style.height = '' + this.h + 'px'
canvas.style.width = '' + 100 + '%'
canvas.style.height = '' + 100 + '%'
canvas.style.backgroundColor = '#00000035'
canvas.style.backgroundColor = '#00000000'
canvas.style.backgroundColor = 'rgba(222, 226, 230, 0.75)'
canvas.style.backgroundColor = '#66142b00'
canvas.style.boxSizing = 'border-box'
// canvas.style.border = '1px green solid'
// canvas.setClearColor ( 'FF0000', 0.5 )
// canvas.setClearColor ( color : '#000000', alpha : 0.5 )

// var ctx = canvas.getContext('2d');
// ctx.fillStyle='black';
// ctx.fillRect(0,0,canvas.width,canvas.height);

//renderer.setClearColor( 0xffffff, 0);
//renderer.setClearColor( 0x66142b, 0);
renderer.setClearColor( 0x66142b, 1);

var geom = new THREE.TorusKnotGeometry(2.5, .5, 100, 16);

var rev = true;

var cols = [{
        stop: 0,
        color: new THREE.Color(0xf7b000)
    }, {
        stop: .25,
        color: new THREE.Color(0xdd0080)
    }, {
        stop: .5,
        color: new THREE.Color(0x622b85)
    }, {
        stop: .75,
        color: new THREE.Color(0x007dae)
    }, {
        stop: 1,
        color: new THREE.Color(0x77c8db)
}];

// setGradient(geom, cols, 'z', rev);
console .log('geom', geom)

function setGradient(geometry, colors, axis, reverse) {

geometry.computeBoundingBox();

var bbox = geometry.boundingBox;
    var size = new THREE.Vector3().subVectors(bbox.max, bbox.min);

var vertexIndices = ['a', 'b', 'c'];
    var face, vertex, normalized = new THREE.Vector3(),
        normalizedAxis = 0;

for (var c = 0; c < colors.length - 1; c++) {

var colorDiff = colors[c + 1].stop - colors[c].stop;

for (var i = 0; i < geometry.faces.length; i++) {
            face = geometry.faces[i];
            for (var v = 0; v < 3; v++) {
                vertex = geometry.vertices[face[vertexIndices[v]]];
                normalizedAxis = normalized.subVectors(vertex, bbox.min).divide(size)[axis];
                if (reverse) {
                    normalizedAxis = 1 - normalizedAxis;
                }
                if (normalizedAxis >= colors[c].stop && normalizedAxis <= colors[c + 1].stop) {
                    var localNormalizedAxis = (normalizedAxis - colors[c].stop) / colorDiff;
                    face.vertexColors[v] = colors[c].color.clone().lerp(colors[c + 1].color, localNormalizedAxis);
                }
            }
        }
    }
}

var mat = new THREE.MeshBasicMaterial({
    vertexColors: THREE.VertexColors,
    wireframe: true
});
var obj = new THREE.Mesh(geom, mat);
// scene.add(obj);

var materials = null
var cubeobj = null
console.log('mathUrl', mathUrl)
const mtlloader = new MTLLoader();
// instantiate a loader
const loader = new OBJLoader();

//************************ */
let options = {
    enableSwoopingCamera: false,
    enableRotation: true,
    transmission: 1,
    thickness: 1.2,
    roughness: 0.6,
    envMapIntensity: 1.5,
    clearcoat: 1,
    clearcoatRoughness: 0.1,
    normalScale: 1,
    // clearcoatNormalScale: 0.3,
    clearcoatNormalScale: 1,
    normalRepeat: 1
};
options = {
    enableSwoopingCamera: false,
    enableRotation: true,
    transmission: 1,
    thickness: 1.2,
    roughness: 0.6,
    envMapIntensity: 3,
    clearcoat: 1,
    clearcoatRoughness: 0.1,
    normalScale: 1,
    // clearcoatNormalScale: 0.3,
    clearcoatNormalScale: 1,
    normalRepeat: 1
};
const textureLoader = new THREE.TextureLoader();

// normalUrl = '/static/mash/001/normal.jpg'
// const hdrEquirect = new THREE.RGBELoader().load(
const hdrEquirect = new RGBELoader().load(
    "/static/mash/001/empty_warehouse_01_2k.hdr",
    () => {
        hdrEquirect.mapping = THREE.EquirectangularReflectionMapping;
    }
);

const normalMapTexture = textureLoader.load("/static/mash/001/normal.jpg");
normalMapTexture.wrapS = THREE.RepeatWrapping;
normalMapTexture.wrapT = THREE.RepeatWrapping;
normalMapTexture.repeat.set(options.normalRepeat, options.normalRepeat);

const material = new THREE.MeshPhysicalMaterial({
    transmission: options.transmission,
    thickness: options.thickness,
    roughness: options.roughness,
    envMap: hdrEquirect,
    envMapIntensity: options.envMapIntensity,
    clearcoat: options.clearcoat,
    clearcoatRoughness: options.clearcoatRoughness,
    normalScale: new THREE.Vector2(options.normalScale),
    // normalMap: normalMapTexture,
    // clearcoatNormalMap: normalMapTexture,
    clearcoatNormalScale: new THREE.Vector2(options.clearcoatNormalScale)
});

let Sphere_geometry = new THREE.IcosahedronGeometry(0.67, 24); // Sphere
// Sphere_geometry = new THREE.RoundedBoxGeometry(1.12, 1.12, 1.12, 16, 0.2);
let sphere_mesh = new THREE.Mesh(Sphere_geometry, material);

scene.add(sphere_mesh);
// sphere_mesh.position.set(...[0.85, 0.85, 0]);
sphere_mesh.position.set(0, 0, 0);
sphere_mesh.rotation.set(0, 0, 0);

//************************ */
mtlloader.load(
    mathUrl,
    function(mat){ 
        mat.preload(); 
        loader.setMaterials( mat )
        materials = mat

// loader.setMaterials( material )

// if( materials ){loader.setMaterials( materials ) }
        // load a resource
        loader.load(
            // resource URL
            // 'models/monster.obj',
            mashUrl,
            // called when resource is loaded
            function ( object ) {
                cubeobj = object
                scene.add( object );
                
                // const axes = new THREE.AxesHelper();
                // axes.material.depthTest = false;
                // axes.renderOrder = 1;
                // object.add(axes);
                addShere()
                console.log();
            },
            // called when loading is in progresses
            function ( xhr ) { console.log( ( xhr.loaded / xhr.total * 100 ) + '% mash loaded' ); },
            // called when loading has errors
            function ( error ) {console.log( 'mash An error happened' );}
        );

},
    function ( xhr ) { console.log( ( xhr.loaded / xhr.total * 100 ) + '% mat loaded' ); },
    function ( error ) { console.log( 'material load an error happened' ); }
)

const color = 0xFFFF00;
const intensity = 150;
const light = new THREE.PointLight( color, intensity );
light.position.set( 5, -5, 2 );
scene.add( light );

const light2 = new THREE.PointLight( 0xFF00FF, intensity );
light2.position.set( 2, 2, 2 );
scene.add( light2 );

const light3 = new THREE.PointLight( 0x00FFFF, intensity );
light3.position.set( -2, -5, 2 );
scene.add( light3 );

const lightw = new THREE.PointLight( 0xFFFFFF, intensity );
lightw.position.set( 0, 0, 20 );
scene.add( lightw );

// const helper = new THREE.PointLightHelper( light );
// scene.add( helper );

// const helper2 = new THREE.PointLightHelper( light2 );
// scene.add( helper2 );

// const helper3 = new THREE.PointLightHelper( light3 );
// scene.add( helper3 );

//********************* */
//********************* */

const controls = new OrbitControls( camera, canvas );
controls.target.set( 0, 0, 0 );
controls.update();

//********************* */
//********************* */

function resize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
        renderer.setSize(width, height, false);
    }
    return needResize;
}

function render() {
    if (resize(renderer)) {
        camera.aspect = canvas.clientWidth / canvas.clientHeight;
        camera.updateProjectionMatrix();
    }
    renderer.render(scene, camera);

if(obj){
        obj.rotation.y += .01;
        obj.rotation.x += .01;
        obj.rotation.z += .01;
    }
    if(cubeobj){
        // cubeobj.rotation.z = 1.55;
        // console.log('x',cubeobj.rotation.x)
        // console.log('y',cubeobj.rotation.y)
        // console.log('z',cubeobj.rotation.z)
        cubeobj.rotation.y += .02;
        // cubeobj.rotation.x += .02;
        // cubeobj.rotation.z += .02;
    }
    if(sphereSystem){
        sphereSystem.rotation.y -= .002;
    }
    requestAnimationFrame(render);
    // canvas.style.backgroundColor = '#00000035'
    //canvas.style.backgroundColor = '#66142b00' 
}

//********************* */
//********************* */

{
    //create a blue LineBasicMaterial
    const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
    const points = [];
    points.push( new THREE.Vector3( - 10, 0, 0 ) );
    points.push( new THREE.Vector3( 0, 5, 0 ) );
    points.push( new THREE.Vector3( 10, 0, 0 ) );
    
    const geometry = new THREE.BufferGeometry().setFromPoints( points );
    const line = new THREE.Line( geometry, material );
    // scene.add( line );
}

{
    // const geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 ); 
    const geometry = new THREE.TorusKnotGeometry( );

const material = new THREE.MeshBasicMaterial( { color: 0xff00ff } ); 
    const torusKnot = new THREE.Mesh( geometry, material );
    // scene.add( torusKnot );
}

{
    const sphereGeometry = new THREE.SphereGeometry( 4, 32, 16 );
    console.log('sphereGeometry',sphereGeometry);
    // console.log('sphereGeometry.vertices.length', sphereGeometry.vertices.length);

const thresholdAngle = 1;  
    const geometry = new THREE.EdgesGeometry(sphereGeometry, thresholdAngle);
    // scene.add( geometry );
    const material = new THREE.LineBasicMaterial( { color: 0xff00ff } );
    const mesh = new THREE.LineSegments( geometry, material );
    // scene.add( mesh );
}
{
    const vertices = [];

for ( let i = 0; i < 10000; i ++ ) {
        const x = THREE.MathUtils.randFloatSpread( 2000 )/100;
        const y = THREE.MathUtils.randFloatSpread( 2000 )/100;
        const z = THREE.MathUtils.randFloatSpread( 2000 )/100;

vertices.push( x, y, z );
    }

//    scene.add(mesh)
}
    const sphereSystem = new THREE.Object3D();
    scene.add(sphereSystem);
function addShere(){
    // sphereSystem.rotation.x += .5;
    const sphereGeometry = new THREE.SphereGeometry( 16, 32, 64,
        Math.PI * 0,
        Math.PI * 2,
        Math.PI * 0,
        Math.PI * 1,
    );
    // let gpt = new THREE.IcosahedronGeometry(15, 15);
    // let geom = new THREE.TorusKnotGeometry(16, 1.5, 200, 16);
    // let verts =  geom.getAttribute('position')['array'];
    let verts =  sphereGeometry.getAttribute('position')['array'];
    console.log('verts', verts)
    // console.log(sphereGeometry.vertices.length);
    for ( let i = 0; i < verts.length; i +=3 ) {

const x = verts[i]
        const y = verts[i+1]
        const z = verts[i+2]

const pointSphere = new THREE.SphereGeometry( 1.15, 16, 8 );
        const mat = new THREE.MeshPhongMaterial({color: 0x2233FF, emissive: 0x112244});
        const mesh = new THREE.Mesh(pointSphere, mat);
        // const mesh = cubeobj.clone();

// mesh.scale.set(1, 1, 1)
        mesh.position.set( x, y-15, z )
        sphereSystem.add(mesh)
        mesh.scale.setScalar(.2)
    }
    // cubeobj.scale.set(.1, .1, .1)
        // cubeobj.scale.setScalar(2)
    
}

if(0){
    // 
    // https://codepen.io/uiunicorn/pen/ExVeGBy

var distance = 1;    
    var geometry = new THREE.Geometry();

for (var i = 0; i < 1000; i++) {

var vertex = new THREE.Vector3();
        
        var theta = THREE.Math.randFloatSpread(360);
        var phi = THREE.Math.randFloatSpread(360);
        
        vertex.x = distance * Math.sin(theta) * Math.cos(phi);
        vertex.y = distance * Math.sin(theta) * Math.sin(phi);
        vertex.z = distance * Math.cos(theta);

geometry.vertices.push(vertex);
    }
    var particles = new THREE.PointCloud(geometry, new THREE.PointCloudMaterial({color: 0x22ffff}));
    particles.boundingSphere = 50;
    //var particles = new THREE.Mesh(geometry, sphereMaterial);
    scene.add(particles);
}

//********************* */

render();
</script>