Toyota Hilux Showroom

hi ,
this is my first project about product configuration , what is your opinion?

http://sebodeweb.ir/3dshow/1.html

3 Likes
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Babylon.js sample code</title>

        <!-- Babylon.js -->
        <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
        <script src="https://preview.babylonjs.com/ammo.js"></script>
        <script src="https://preview.babylonjs.com/cannon.js"></script>
        <script src="https://preview.babylonjs.com/Oimo.js"></script>
        <script src="https://preview.babylonjs.com/gltf_validator.js"></script>
        <script src="https://preview.babylonjs.com/earcut.min.js"></script>
        <script src="https://preview.babylonjs.com/babylon.js"></script>
        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
        <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
        <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
        <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>

        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                direction:rtl;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
            #control{
              padding-top:10px;
                bottom:0;
                background:#808080;
			    width:100%;
                height:50px;
                height: 50px;
				z-index: 2020;
				position: fixed;
                opacity:0.8;
                font-weight:bold;
                color:white;
			}
            .materialbase
            {
            width:10% !important;
            float:right;
            height:30PX;
            margin-right:8%;
          
            border-radius: 5px
            }
            #material1
            {
            background-color:#2092dd;
           
            }
             #material2
            {
            background-color:#ce22ab;
           
            }
              #material3
            {
            background-color:#e90b0b;
           
            }

        </style>
    </head>
<body>
    <div id="control">
        <div class="materialbase">color select :</div>
        <div class="materialbase" id="material1"></div>
        <div class="materialbase" id="material2"></div>
        <div class="materialbase" id="material3" ></div>
       
    </div>
    <canvas id="renderCanvas"></canvas>
    
    <script>
        var canvas = document.getElementById("renderCanvas");

        var createScene = function () {
            var scene = new BABYLON.Scene(engine);
        
            //Adding a light
            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);
        
            //Adding an Arc Rotate Camera
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
            camera.rotation.x = 0; //rotation around x axis
            camera.rotation.y = 2.9;  //rotation around y axis
            camera.rotation.z = 0;
           camera.position.x = -25;
            camera.position.y = 6;
            camera.position.z = 68;
            //camera start animate
            var cam;
            var targetEndPos;
            var camEndPos;
            var speed = 45;
            var frameCount = 200;
            var ease = new BABYLON.CubicEase();
            ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
            cam = scene.activeCamera;
            targetEndPos = new BABYLON.Vector3(0, 0, 0);
            camEndPos = new BABYLON.Vector3(25,5, 50);
            console.log("scd.  cam.position: ", cam.position);
            console.log("scd.  camEndPos: ", camEndPos);
            console.log("scd.  speed: ", speed);
            console.log("scd.  frameCount: ", frameCount);
            // console.log("actp.  frameCount: ", frameCount);
            // console.log("actp.  newPos: ", newPos);
            BABYLON.Animation.CreateAndStartAnimation('at4', cam, 'position', speed, frameCount, cam.position, camEndPos, 0, ease);
            BABYLON.Animation.CreateAndStartAnimation('at5', cam, 'target', speed, frameCount, cam.target, targetEndPos, 0, ease);
            console.log("setCamDefault run");
            //end camera animate

            //camera limit
            camera.attachControl(canvas, false);
            camera.lowerRadiusLimit = 20;
            camera.upperRadiusLimit = 100;
            camera.wheelDeltaPercentage = 0.1;
            //end limit
            var assetsManager = new BABYLON.AssetsManager(scene);
            var meshTask = assetsManager.addMeshTask("skull task", "", "hilux/", "hux02.babylon");
            
           
        	meshTask.onSuccess = function (task) {
        	    task.loadedMeshes[0].position = BABYLON.Vector3.Zero();
        	}
        	meshTask.actionManager = new BABYLON.ActionManager(scene);
           
            //this part cash texchers for change
        	var grass2 = new BABYLON.StandardMaterial("grass2", scene);
        	grass2.diffuseColor = new BABYLON.Texture("hilux/c02.jpg", scene);
        	grass2.diffuseColor = new BABYLON.Texture("hilux/c03.jpg", scene);
        	grass2.diffuseColor = new BABYLON.Texture("hilux/toyota_red.jpg", scene);
        	var material1 = document.getElementById('material1');
        	var material2 = document.getElementById('material2');
        	var material3 = document.getElementById('material3');
            //start here
        	material1.onclick = function () {
        	
        	    scene.getMaterialByName("Material #126").diffuseTexture = new BABYLON.Texture("hilux/c02.jpg", scene);
        	};
        	material2.onclick = function () {
        	 
        	    scene.getMaterialByName("Material #126").diffuseTexture = new BABYLON.Texture("hilux/c03.jpg", scene);
        	  
        	};
        	material3.onclick = function () {
        	    //  scene.getMaterialByName("Material #129").diffuseTexture.dispose();
        	    scene.getMaterialByName("Material #126").diffuseTexture = new BABYLON.Texture("hilux/toyota_red.jpg", scene);

        	};
            //end
        	

        
            // Move the light with the camera
            scene.registerBeforeRender(function () {
                light.position = camera.position;
            });
        	
        	assetsManager.onFinish = function (tasks) {
        		engine.runRenderLoop(function () {
        			scene.render();
        		});
        	};
        	
        	assetsManager.load();
        
            return scene;
        }
        
        var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
        var scene = createScene();

        engine.runRenderLoop(function () {
            if (scene) {
                scene.render();
            }
        });

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
        

    </script>
</body>
</html>

Good job!!!

1 Like

The text on the right bottom corner is in persian and means - thanks to google translate- : “Color Picker!” :smiley:

image

1 Like

Nice work :sunglasses: congratulations.

Nice work, congratulations. Reflections on vehicle stands upside down. You can handle this problem by using normal bump for the bump channel. This will work. Overall a nice run. Reflections on vehicle stands upside down. You can handle this problem by using normal bump for the bump channel. This will work. Overall a nice work :sweat_smile:

1 Like

Maybe this tutorial is helpfull for your next step:

https://blog.raananweber.com/2016/09/06/webgl-car-physics-using-babylon-js-and-oimo-js/

found via Off-Site Tutorials List - Babylon.js Documentation

2 Likes