DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

refactor: support light

This commit is contained in:
dntzhang 2019-11-11 09:24:10 +08:00
parent add0ce2ca3
commit cd848bc4c6
6 changed files with 187 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
packages/omi-three/README.md
View File

@ -4,7 +4,8 @@
```jsx
import { render, define, WeElement } from 'omi'
import '../../src/index.js'
import 'omi-three'
import omiLogo from './logo.png'
define('my-app', class extends WeElement {
@ -23,40 +24,56 @@ define('my-app', class extends WeElement {
render() {
return (
<div>
<h1>Omi-Three</h1>
<omi-three
ref={_ => this.ot = _}
width={window.innerWidth}
height={window.innerHeight} >
<perspective-camera
fov="75"
aspect=":aspect"
near="0.1"
far="1000"
z="5">
</perspective-camera>
<group alpha={0.5} y={270}>
<mesh rotation={this.cubeRotation}>
<box-geometry
width={1}
height={1}
depth={1}>
</box-geometry >
<base-material
color={0x00ff00}>
</base-material>
</mesh>
</group>
</omi-three>
</div>
<omi-three
ref={_ => this.ot = _}
width={window.innerWidth}
height={window.innerHeight} >
<perspective-camera
fov={75}
aspect={window.innerWidth / window.innerHeight}
near={0.1}
far={1000}
z={5}>
</perspective-camera>
<point-light
color={0xffffff}
intensity={1}
distance={1000}
position={{
x: 110,
y: 110,
z: 110
}}
castShadow={true}>
</point-light>
<ambient-light color={0x404040}></ambient-light>
<group alpha={0.5} y={270}>
<mesh rotation={this.cubeRotation}>
<box-geometry
width={1}
height={1}
depth={1}>
</box-geometry >
<phong-material
map={omiLogo}>
</phong-material>
</mesh>
</group>
</omi-three>
)
}
})
render(<my-app />, 'body')
```
<!--
Same as:
```html
@ -111,4 +128,4 @@ Same as:
</body>
</html>
```
``` -->

112
packages/omi-three/examples/simple/bundler.js
View File

@ -5275,42 +5275,42 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
var _this3 = this;
return Omi.h(
'div',
null,
'omi-three',
{
ref: function ref(_) {
return _this3.ot = _;
},
width: window.innerWidth,
height: window.innerHeight },
Omi.h('perspective-camera', {
fov: 75,
aspect: window.innerWidth / window.innerHeight,
near: 0.1,
far: 1000,
z: 5 }),
Omi.h('point-light', {
color: 0xffffff,
intensity: 1,
distance: 1000,
position: {
x: 110,
y: 110,
z: 110
},
castShadow: true }),
Omi.h('ambient-light', { color: 0x404040 }),
Omi.h(
'h1',
null,
'Omi-Three'
),
Omi.h(
'omi-three',
{
ref: function ref(_) {
return _this3.ot = _;
},
width: window.innerWidth,
height: window.innerHeight },
Omi.h('perspective-camera', {
fov: 75,
aspect: window.innerWidth / window.innerHeight,
near: 0.1,
far: 1000,
z: 5 }),
'group',
{ alpha: 0.5, y: 270 },
Omi.h(
'group',
{ alpha: 0.5, y: 270 },
Omi.h(
'mesh',
{ rotation: this.cubeRotation },
Omi.h('box-geometry', {
width: 1,
height: 1,
depth: 1 }),
Omi.h('phong-material', {
color: 0xffffff,
map: _logo2['default']
})
)
'mesh',
{ rotation: this.cubeRotation },
Omi.h('box-geometry', {
width: 1,
height: 1,
depth: 1 }),
Omi.h('phong-material', {
map: _logo2['default'] })
)
)
);
@ -5401,15 +5401,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.pool = new _objectPool2['default']();
this.threeRender();
var scene = this.scene;
var light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 10, 0);
light.castShadow = true; // default false
scene.add(light);
var light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
}
}, {
key: 'render',
@ -5439,7 +5430,10 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
}, {
key: 'update',
value: function update() {
//this.scene.empty()
while (this.scene.children.length > 0) {
this.scene.remove(this.scene.children[0]);
}
this.pool.reset();
this.threeRender(this.props.children, this.scene, this.pool);
}
@ -5566,10 +5560,10 @@ var ObjectPool = function () {
case 'box-geometry':
var obj = this.boxGeometryList.find(function (item) {
return item.width === vnode.attributes.width && item.height === vnode.attributes.height && item.depth === vnode.attributes.depth;
return item.width === attr.width && item.height === attr.height && item.depth === attr.depth;
});
if (!obj) {
obj = new THREE.BoxGeometry(vnode.attributes.width, vnode.attributes.height, vnode.attributes.depth);
obj = new THREE.BoxGeometry(attr.width, attr.height, attr.depth);
this.boxGeometryList.push(obj);
}
return obj;
@ -5578,9 +5572,9 @@ var ObjectPool = function () {
var bm = void 0;
if (this.meshBasicMaterialList.length > 0) {
bm = this.meshBasicMaterialList[0];
bm.color = new THREE.Color(vnode.attributes.color);
bm.color = new THREE.Color(attr.color);
} else {
bm = new THREE.MeshBasicMaterial({ color: vnode.attributes.color });
bm = new THREE.MeshBasicMaterial({ color: attr.color });
this.meshBasicMaterialList.push(bm);
}
@ -5590,11 +5584,11 @@ var ObjectPool = function () {
var pm = void 0;
if (this.phoneMaterialList.length > 0) {
pm = this.phoneMaterialList[0];
pm.color = new THREE.Color(vnode.attributes.color);
pm.color = new THREE.Color(attr.color);
} else {
var opts = { color: vnode.attributes.color };
if (vnode.attributes.map) {
opts.map = THREE.ImageUtils.loadTexture(vnode.attributes.map);
var opts = { color: attr.color };
if (attr.map) {
opts.map = THREE.ImageUtils.loadTexture(attr.map);
}
pm = new THREE.MeshPhongMaterial(opts);
this.phoneMaterialList.push(pm);
@ -5631,6 +5625,20 @@ var ObjectPool = function () {
scene.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
scene.camera.position.z = 5;
return null;
case 'point-light':
//todo，相同color、intensity和distance的复用
var pl = new THREE.PointLight(attr.color, attr.intensity, attr.distance);
pl.position.set(attr.position.x, attr.position.y, attr.position.z);
pl.castShadow = attr.castShadow; // default false
return pl;
case 'ambient-light':
//todo，复用并改变color
var al = new THREE.AmbientLight(attr.color);
return al;
}
}
}, {

8
packages/omi-three/examples/simple/index.html
View File

@ -3,7 +3,13 @@
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>omi-three</title>
<title>omi-three</title>
<style>
html,body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>

74
packages/omi-three/examples/simple/main.js
View File

@ -10,46 +10,58 @@ define('my-app', class extends WeElement {
}
installed() {
setInterval(() => {
this.cubeRotation.x += 0.01;
this.cubeRotation.y += 0.01;
this.ot.update()
}, 16)
}
render() {
return (
<div>
<h1>Omi-Three</h1>
<omi-three
ref={_ => this.ot = _}
width={window.innerWidth}
height={window.innerHeight} >
<perspective-camera
fov={75}
aspect={window.innerWidth / window.innerHeight}
near={0.1}
far={1000}
z={5}>
</perspective-camera>
<group alpha={0.5} y={270}>
<mesh rotation={this.cubeRotation}>
<box-geometry
width={1}
height={1}
depth={1}>
</box-geometry >
<phong-material
color={0xffffff}
map={omiLogo}
>
</phong-material>
</mesh>
</group>
</omi-three>
</div>
<omi-three
ref={_ => this.ot = _}
width={window.innerWidth}
height={window.innerHeight} >
<perspective-camera
fov={75}
aspect={window.innerWidth / window.innerHeight}
near={0.1}
far={1000}
z={5}>
</perspective-camera>
<point-light
color={0xffffff}
intensity={1}
distance={1000}
position={{
x: 110,
y: 110,
z: 110
}}
castShadow={true}>
</point-light>
<ambient-light color={0x404040}></ambient-light>
<group alpha={0.5} y={270}>
<mesh rotation={this.cubeRotation}>
<box-geometry
width={1}
height={1}
depth={1}>
</box-geometry >
<phong-material
map={omiLogo}>
</phong-material>
</mesh>
</group>
</omi-three>
)
}
})

15
packages/omi-three/src/index.js
View File

@ -4,7 +4,6 @@ import ObjectPool from './object-pool'
define('omi-three', class extends WeElement {
installed() {
this.scene = new THREE.Scene()
@ -15,16 +14,9 @@ define('omi-three', class extends WeElement {
this.pool = new ObjectPool()
this.threeRender()
const scene = this.scene
var light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 10, 0);
light.castShadow = true; // default false
scene.add(light);
var light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
}
render(props) {
return (
<canvas
@ -48,7 +40,10 @@ define('omi-three', class extends WeElement {
update() {
//this.scene.empty()
while (this.scene.children.length > 0) {
this.scene.remove(this.scene.children[0]);
}
this.pool.reset()
this.threeRender(this.props.children, this.scene, this.pool)
}

35
packages/omi-three/src/object-pool.js
View File

@ -89,12 +89,12 @@ export default class ObjectPool {
case 'box-geometry':
let obj = this.boxGeometryList.find(item => item.width === vnode.attributes.width &&
item.height === vnode.attributes.height
&& item.depth === vnode.attributes.depth
let obj = this.boxGeometryList.find(item => item.width === attr.width &&
item.height === attr.height
&& item.depth === attr.depth
)
if (!obj) {
obj = new THREE.BoxGeometry(vnode.attributes.width, vnode.attributes.height, vnode.attributes.depth);
obj = new THREE.BoxGeometry(attr.width, attr.height, attr.depth);
this.boxGeometryList.push(obj)
}
return obj
@ -104,9 +104,9 @@ export default class ObjectPool {
let bm
if (this.meshBasicMaterialList.length > 0) {
bm = this.meshBasicMaterialList[0]
bm.color = new THREE.Color(vnode.attributes.color)
bm.color = new THREE.Color(attr.color)
} else {
bm = new THREE.MeshBasicMaterial({ color: vnode.attributes.color });
bm = new THREE.MeshBasicMaterial({ color: attr.color });
this.meshBasicMaterialList.push(bm)
}
@ -116,11 +116,11 @@ export default class ObjectPool {
let pm
if (this.phoneMaterialList.length > 0) {
pm = this.phoneMaterialList[0]
pm.color = new THREE.Color(vnode.attributes.color)
pm.color = new THREE.Color(attr.color)
} else {
const opts = { color: vnode.attributes.color }
if(vnode.attributes.map){
opts.map = THREE.ImageUtils.loadTexture(vnode.attributes.map)
const opts = { color: attr.color }
if (attr.map) {
opts.map = THREE.ImageUtils.loadTexture(attr.map)
}
pm = new THREE.MeshPhongMaterial(opts);
this.phoneMaterialList.push(pm)
@ -157,6 +157,21 @@ export default class ObjectPool {
scene.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
scene.camera.position.z = 5;
return null
case 'point-light':
//todo，相同color、intensity和distance的复用
const pl = new THREE.PointLight(attr.color, attr.intensity, attr.distance);
pl.position.set(attr.position.x, attr.position.y, attr.position.z);
pl.castShadow = attr.castShadow; // default false
return pl
case 'ambient-light':
//todo，复用并改变color
const al = new THREE.AmbientLight(attr.color);
return al
}
}