mhmadnr
/
threeSampel
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

add

master
mhmad_nr 3 years ago
commit
586d7c4abb
20 changed files with 112158 additions and 0 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +24
    -0
      dubel.html
  2. BIN
     
  3. BIN
     
  4. +52057
    -0
      js/main.js
  5. +5
    -0
      js/main.js.LICENSE.txt
  6. +55849
    -0
      js/model.js
  7. +24
    -0
      model.html
  8. +11
    -0
      model/license.txt
  9. BIN
     
  10. +1412
    -0
      model/scene.gltf
  11. BIN
     
  12. +2532
    -0
      package-lock.json
  13. +26
    -0
      package.json
  14. +98
    -0
      src/Dubel.js
  15. +81
    -0
      src/model.js
  16. BIN
     
  17. BIN
     
  18. BIN
     
  19. BIN
     
  20. +39
    -0
      webpack.config.js

+ 24
- 0
dubel.html View File

@@ -0,0 +1,24 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
#main{
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="main"></div>
</body>
<script type="module" src="./js/main.js"></script>

</html>

BIN
View File


BIN
View File


+ 52057
- 0
js/main.js
File diff suppressed because it is too large
View File


+ 5
- 0
js/main.js.LICENSE.txt View File

@@ -0,0 +1,5 @@
/**
* @license
* Copyright 2010-2021 Three.js Authors
* SPDX-License-Identifier: MIT
*/

+ 55849
- 0
js/model.js
File diff suppressed because it is too large
View File


+ 24
- 0
model.html View File

@@ -0,0 +1,24 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
#main{
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="main"></div>
</body>
<script type="module" src="./js/model.js"></script>

</html>

+ 11
- 0
model/license.txt View File

@@ -0,0 +1,11 @@
Model Information:
* title: Sintel & Scales
* source: https://sketchfab.com/3d-models/sintel-scales-c3a302db15894e219b4eebfaf88d71fc
* author: Julien Kaspar (https://sketchfab.com/jkaspar)

Model License:
* license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
* requirements: Author must be credited. Commercial use is allowed.

If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
This work is based on "Sintel & Scales" (https://sketchfab.com/3d-models/sintel-scales-c3a302db15894e219b4eebfaf88d71fc) by Julien Kaspar (https://sketchfab.com/jkaspar) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)

BIN
View File


+ 1412
- 0
model/scene.gltf
File diff suppressed because it is too large
View File


BIN
View File


+ 2532
- 0
package-lock.json
File diff suppressed because it is too large
View File


+ 26
- 0
package.json View File

@@ -0,0 +1,26 @@
{
"name": "three",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"three": "^0.132.2",
"three-dragcontrols": "^0.88.2",
"three-gltf-loader": "^1.111.0",
"three-orbitcontrols": "^2.110.3",
"webpack-cli": "^4.8.0"
},
"devDependencies": {
"@babel/core": "^7.15.5",
"@babel/preset-env": "^7.15.6",
"babel-loader": "^8.2.2",
"file-loader": "^6.2.0",
"webpack": "^5.55.1"
},
"scripts": {
"build": "webpack -w"
},
"keywords": [],
"author": "",
"license": "ISC"
}

+ 98
- 0
src/Dubel.js View File

@@ -0,0 +1,98 @@
import * as THREE from 'three';
import {FlakesTexture} from 'three';
import textureimg from "/Users/chop/Desktop/chamran/Three/texture/text.png";
const OrbitControls = require('three-orbitcontrols')

import DragControls from 'three-dragcontrols';

const main = document.querySelector("#main");


const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerHeight / innerHeight, 0.1, 1000);
// controls.enableDamping = true
// controls.dampingFactor = 0.25
// controls.enableZoom = false

const light = new THREE.PointLight( 0xffffff, 1, 1000 );
light.position.set( 200, 200, 200 );
scene.add( light );
scene.background = new THREE.Color("#17191c")
camera.position.set(0, 0, 100);
const renderer = new THREE.WebGLRenderer();




const texture = new THREE.TextureLoader().load( textureimg );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 10, 6 );

const ballMaterial1 = {
clearcoat:1.0,
cleacoatRoughness:0.1,
metalness:0.9,
roughness:0.5,
color:"#8afff1",
normalMap:texture,
normalScale: new THREE.Vector2(0.15,0.15)
}

const ballMaterial2 = {
clearcoat:1.0,
cleacoatRoughness:0.1,
metalness:0.9,
roughness:0.5,
color:"red",
normalMap:texture,
normalScale: new THREE.Vector2(0.15,0.15)
}

const dayere = new THREE.SphereGeometry(20,64,64)
const dayereTex1 = new THREE.MeshPhysicalMaterial(ballMaterial1)
const dayereTex2 = new THREE.MeshPhysicalMaterial(ballMaterial2)
const meterial = new THREE.MeshBasicMaterial();
meterial.color.set('#e61cc7');
const mesh1 = new THREE.Mesh(dayere, dayereTex1)
const mesh2 = new THREE.Mesh(dayere, dayereTex2)
mesh1.position.x = 30;
mesh2.position.x = -30;


// var fgeometry = new THREE.PlaneGeometry( 500, 500, 1, 1 );
// var fmaterial = new THREE.MeshBasicMaterial( { color: "#1c3ae6" } )
// var floor = new THREE.Mesh( fgeometry, fmaterial );
// floor.material.side = THREE.DoubleSide;
// floor.rotation.x = 90;
// scene.add( floor );


renderer.setSize(innerWidth, innerHeight)
main.appendChild(renderer.domElement);


scene.add(mesh1);
scene.add(mesh2);

// const controls = new DragControls(geometry, camera, renderer.domElement)
// console.log(controls);
// controls.addEventListener('dragstart', function (event) {
// console.log("adadwdsd");
// event.geometry.material.opacity = 0.33
// console.log(event);
// })
// controls.addEventListener('dragend', function (event) {
// event.geometry.material.opacity = 1
// })
const controlsCamra = new OrbitControls(camera, renderer.domElement)

function animate() {
controlsCamra.update();
requestAnimationFrame(animate);
renderer.render(scene, camera);
// mesh.rotation.y += 0.01;
}
animate();


+ 81
- 0
src/model.js View File

@@ -0,0 +1,81 @@
import * as THREE from 'three';
import { Scene } from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const main = document.querySelector("#main");

// import GLTFLoader from 'three-gltf-loader';
const OrbitControls = require('three-orbitcontrols')



// const scene = new THREE.Scene();
// const camera = new THREE.PerspectiveCamera(75, innerHeight / innerHeight, 0.1, 1000);



// const light = new THREE.PointLight( 0xffffff, 1, 1000 );
// light.position.set( 200, 200, 200 );
// scene.add( light );
// scene.background = new THREE.Color(0xdddddd);
// camera.position.set(0, 0, 100);
// const renderer = new THREE.WebGLRenderer();



// renderer.setSize(innerWidth, innerHeight)




// const controlsCamra = new OrbitControls(camera, renderer.domElement)

// function animate() {
// controlsCamra.update();
// requestAnimationFrame(animate);
// renderer.render(scene, camera);
// }
// animate();
let scene, camera, renderer, hlighit;
const init = () => {
scene = new THREE.Scene();
scene.background = new THREE.Color("#e9e9e9");

camera = new THREE.PerspectiveCamera(50, innerWidth / innerHeight, 1, 2000);
camera.position.set(0, 50, 300);

const light = new THREE.PointLight( 0xffffff, 1, 1000 );
light.position.set( 200, 200, 200 );
scene.add( light );

hlighit = new THREE.AmbientLight(0x404040, 100);
scene.add(hlighit);

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
// document.body.appendChild(renderer.domElement);
main.appendChild(renderer.domElement);

const loader = new GLTFLoader();

loader.load('./model/scene.gltf', function (gltf) {

scene.add(gltf.scene);
renderer.render(scene, camera);

}, undefined, function (error) {

console.error(error);

});
const controlsCamra = new OrbitControls(camera, renderer.domElement)

function animate() {
controlsCamra.update();
requestAnimationFrame(animate);
renderer.render(scene, camera);
// mesh.rotation.y += 0.01;
}
animate();
}
init();

BIN
View File


BIN
View File


BIN
View File


BIN
View File


+ 39
- 0
webpack.config.js View File

@@ -0,0 +1,39 @@
const path = require('path');

module.exports = {
mode: "development", // "production" | "development" | "none"
entry: {
main:"./src/Dubel",
model:"./src/model"
}, // string | object | array
output: {
path: path.resolve(__dirname, "js"), // string (default)
filename: "[name].js"
},
devtool: false,
performance: { hints: false },
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},

{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-object-rest-spread']
}
}
}
]
}
}

Write Preview
Loading…
Cancel
Save